![overflow scrolling overflow scrolling](https://cdn.educba.com/academy/wp-content/uploads/2020/03/CSS-Overflow.png)
![overflow scrolling overflow scrolling](https://images2017.cnblogs.com/blog/1294929/201712/1294929-20171214103636379-1667026180.png)
Windows scrollbars are obtrusive and very wide by default.
OVERFLOW SCROLLING MAC OS
They’re much wider by default than their Mac OS counterparts and typically conform to operating system colors (not a page’s color palette).įor designers accustomed to Mac environments but designing multi-platform web experiences, trying to make everyone happy in a way that doesn’t place a lot of performance burden on the end user can be tricky. Windows scrollbars are not only obtrusive by default but are particularly heavy, design-wise. Unfortunately even with this preference checked, it had no effect on scrollbar behavior in Firefox, Chrome, in Internet Explorer and Edge-whether Chromium or EdgeHTML based. On Windows 10, a similar preference exists in Settings → Display → Simplify and personalize Windows. The following video demonstrates how the Mac OS user preference changes the obtrusiveness of the scrollbar: This preference was confirmed to control how scrollbars behave in Chrome, Firefox, and Safari, and new Chromium-based Edge. There are three options for this in the General pane in your System Preferences: This is the default behavior when a mouse is not connected to the machine. On Mac OS (Mojave at time of writing), scrollbars are hidden until the element is scrolled.
OVERFLOW SCROLLING ANDROID
These don’t subtract screen real estate away from the container they belong to.Ĭurrent Behavior to 'Current Behavior' #īy default on both iOS and Android scrollbars are unobtrusive. Unobtrusive scrollbars: scrollbars that sit on top of the content.These do not overlay on top of the content, but appear next to it. Obtrusive scrollbars: scrollbars that take up screen real estate.Moreover, touch devices have popularized hiding the scrollbar, making it invisible until an overflowing element is scrolled, trading design aesthetics for confusion on containers that don’t appear to be overflowing/scrollable at all.Ĭlassical desktop operating systems have continued this trend, attempting to minimize the design intrusiveness of the classic scrollbar.īefore we get too far, let’s get a few definitions out of the way: Scrolljacking hijacks the default scrolling behavior, breaking the implied contract between document length and scrollbar height. But that’s not all a scrollbar can do! This modest workhorse also provides a meaningful hint at how long the document is, pulling double duty as a document progress bar too. The scrollbar is a humble but productive mechanism that operates as the primary means through which one can traverse a document.