Take care of your scrollbars!


1 min read

Take care of your scrollbars!

If you are a web developer/designer and you are working on a mac machine, remember to make your scrollbars visible!

Mac by default hides the scrollbar and shows it only when you scroll. For developers/designers to see what their style is doing to scrollbars on the page, it’s a good idea to make it visible always.

Your elegant design may look ugly or even worse broken when scrollbars are visible. This can happen if you have multiple nested layout containers and end up having multiple horizontal and vertical scrollbars.

It all looks good in mac but you may be surprised looking at the same page on windows.

It’s easy to make scrollbars visible. Go to System Preferences > General and check to always show scrollbars.

Screen Shot 2022-07-04 at 5.08.03 pm.png

Remember that page’s default behaviour around scrollbars are more extensive than just a simple gesture and there are multiple ways people may use to scroll and they expect the page to behave in certain ways!

So be careful not to break the default behaviour with bad page layout.

If you are curious what I mean by bad layouts and breaking scrollbars default behaviour, watch this video by Kevin YankWhen is a scrollbar not a scrollbar?