Sven Kadak

Scrollbar Blindness

In 2011, Apple released Mac OS X Lion which introduced an enhanced scrollbar behavior that made scrollbars hidden by default. The scrollbar appears when the user starts scrolling a document and disappears after the scrolling stops.

It appears, however, that this enhancement did not only change the user interface, but has also shaped how developers (don't) think about that specific UI element when creating cross-platform solutions. I call it scrollbar blindness.

Lately, for some reason, I've started to notice more of it. I have been to numerous websites that have elements with overflow-y or overflow-x set to scroll while the element is not meant to be scrollable. For no apparent reason, some even set both x and y axes scrollable or create multiple levels of stacked scrollbars.

Comparison

Here's a side-by-side comparison of the same scrollbar-heavy containers rendered by Firefox on Linux (with scrollbars) and MacOS (without).

Examples

Here are some examples of scrollbar blindness I've stumbled upon:

  • github.com: Pricing plan and companies containers have overflow-x: scroll, should be auto.
  • snapchat.com: Story's up next section is a mess with multiple unnecessary scrollbars.
  • techcrunch.com: Menu has overflow-x: scroll, should be auto.
  • producthunt.com: Hunter and maker lists have an unnecessary vertical scrollbar.
  • algolia.com: Code editors have overflow-x: scroll, should be auto.
  • render.com: Page has an unnecessary horizontal scrollbar. (Fixed)
  • spectrum.chat: Menu meant for smaller screens sits at the top of the main content column with overflow-x: scroll which should be auto.
  • foxcademy.com: Menu bar has overflow-x: scroll, should be auto.
  • creatorspot.co:
    • Media lists have overflow-x: scroll, should be auto.
    • Menu dropdowns have overflow-y: scroll, should be auto.
    • Creator details modal has width: 100vw which makes its scrollbar stay underneath document's scrollbar. This produces a very confusing user experience as the view is scrollable, but the (document's) scrollbar is not moving. After scrolling to the bottom of the modal, document's scrollbar takes over and scrolls the main view instead.
  • embed.ly: Embedded audio player widget has an unnecessary vertical scrollbar.
  • nerdy.dev: Page container has unnecessary overflow: scroll.
  • happyhues.co: Palette sidebar has an unnecessary horizontal scrollbar.
  • visalist.io: Double vertical scrollbars.
  • theglobalhack.com: Timeline section has overflow-x: scroll, should be auto.
  • getpocket.com Page has an unnecessary horizontal scrollbar.
  • seb.ee: Footer columns have unnecessary vertical scrollbars.
  • teamtailor.com: Cookie notice has an unnecessary scrollbar.
  • recursive.design: Page and all text editing sections have unnecessary horizontal scrollbars. In mobile view, some containers are given an extra scrollbar.

As can be seen from the examples, even big organizations like Github and Snapchat that have tens if not a hundred front-end developers, and probably have a code review process in place, let the problem slip through. I collected these examples months ago and the scrollbars are still just as I found them.

Conclusion

If you are a front-end developer that uses macOS, I kindly ask you to dedicate a little more attention to how the websites you create behave on platforms other than your own. Alternatively, you can set the scrollbars to be visible at all times by setting System Preferences -> General -> Show scroll bars to Always.