PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

A “new direction” in the struggle against rightward scrolling

May 23, 2020
in Web Dev
289 3
A “new direction” in the struggle against rightward scrolling


A menu drawer slides in from the left side of the screenThe other day I was building a responsive website with a navigation menu that slides into view from the left when you click the menu button.

I was about to head off to the pub, but then I learned the menu was supposed to slide in from the right side instead.

No big deal. With a few lines of CSS I can set the default position off the right edge…

An element positioned off-screen to the right causes scrollingBut oh no! An element off the right edge of the screen will cause horizontal scrolling. This is not cool.

My first thought was to reach for trusty old overflow-x:hidden and be on my way. But there’s a few common situations where this won’t work:

  • Some of the many beloved clearfix solutions for containing floats use overflow:auto;
  • If any of the child elements are position:sticky; they will stop sticking if their parent overflow value is anything other than visible. This is explained in this Stackoverflow answer.
Darn. Now what? I wish I could force the right side of the screen to behave like the left side. Well, it turns out we can! The origin of the scrollbar can be reversed with the lesser-known CSS direction property, which is used to set the direction that text content flows.
body,
html {
direction: rtl;
}
body * {
direction: ltr;
}

The first rule switches the text direction of the root node and the body to right-to-left. This also means the origin of the scrollbar starts from the right, expanding to the left. These are the elements that were previously being overflowed by that right-sided menu. But now they no longer care about elements hidden “behind” them on the right side.

Setting direction to rtl will also reverse the default alignment of text, and English looks funny flowing from right to left. So, the next rule resets all children of the body element back to the default left-to-right text direction.

I have not used this hack in production yet, nor have I done extensive cross-browser testing yet. If you have good or bad experiences with this technique I’d love to hear about it.



Source link

Share219Tweet137Share55Pin49

Related Posts

Reader Question: Why did you choose Statamic for Laravel News?
Web Dev

Reader Question: Why did you choose Statamic for Laravel News?

Steve McDougall asked us a great question on Twitter about our redesign and relaunch of Laravel News on Statamic:...

February 26, 2021
Building User Trust In UX Design — Smashing Magazine
Web Dev

Building User Trust In UX Design — Smashing Magazine

About The AuthorAdam is a senior lead UX/UI designer with more than 8 years of experience. Adam’s passion for...

February 26, 2021
Laravel Themer package: add multi-theme support for Laravel application
Web Dev

Laravel Themer package: add multi-theme support for Laravel application

This Laravel Themer package adds multi-theme support to your Laravel application. It also provides a simple authentication scaffolding and...

February 26, 2021
CSS transitions and hover animations, an interactive guide
Web Dev

CSS transitions and hover animations, an interactive guide

The world of web animations has become a sprawling jungle of tools and technologies. Libraries like GSAP and Framer...

February 26, 2021
Next Post
12 Funny Linux Commands to Spice Up Your Terminal

12 Funny Linux Commands to Spice Up Your Terminal

Laracon, Query Monitors, and keeping up with Laravel

Laracon, Query Monitors, and keeping up with Laravel

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

When Sass and New CSS Features Collide

When Sass and New CSS Features Collide

June 29, 2020
That other global: name

That other global: name

January 21, 2021
A Wiki-Like Note-taking App That Makes Things Easier

A Wiki-Like Note-taking App That Makes Things Easier

September 7, 2020
Backdrop Filter effect with CSS

Backdrop Filter effect with CSS

July 16, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In