Master overflow - no matter operating system
Now, what do I even mean with mastering overflow, no matter OS you think?
As a Mac user, there has been several times, where the customer returns to me, telling me that the scroll bar looks annoying.
Luckily this is such a small amount of CSS to be adjusted, but it can still be really frustrating to forget this each time.
Why this is happening, is because on Mac, scroll bars won't be physical by default, like they would on Windows machines. They will only be visible when you are actually scrolling, and not even here, will the scroll bar be physical on Mac. So to your/my defence, it is EASY to forget. But there is a way to solve this with a simple CSS rule, I'm about to tell you.
First of all, as a mac user, seeing it in action, I always just used
overflow: scroll;
Cause this is it what you want, right?!
It does act AND looks the way it should - on my mac. Great, lets deploy!
... And the customer on Windows will probably return.
This will look wrong in two ways on a Windows machine.
- It will always show the scroll bar no matter if overflow exist.
- It will show the scroll bar both vertical and horizontal.
We need to stop this! And we can go really far, with a minor CSS adjustment!
Ready?
overflow-y: auto;
Boom! Mindblowing!
First of all, let's say we only want to handle overflow vertically. This is what the Y we added will toggle.
This will remove the horizontal scroll bar.
Replacing the value scroll with auto will now only show the scroll bar when there is any overflow.
Clearly, this is a change in the mindset. I can't imagine, we want to show a scroll bar when there is nothing to scroll.
So auto should be used every. single. time.
Actually, using auto will also handle the horizontal part, since we don't have any overflow in this case. But I still prefer to add the Y, just to show where overflow can happen, in CSS.
Oh! There is another thing to mention!
You can set the scroll bars to be visible on your Mac, just to doublecheck.
- Go to System preferences
- Select General
- Set Show scroll bars to Always