In macOS, users have the ability to set when they want to see scrollbars in windows. This affects all windows in the operating system, including in web browsers. They have three choices:
You can make it auto-hiding instead of always-showing:
html {
-ms-overflow-style: -ms-autohiding-scrollbar;
}Turns out like this:
Credit to Thierry Koblentz for digging this gem out of Jon Neal’s Sanitize.css.…
Scrollbars are one of those UI components that are present on almost every page of the internet, yet we (developers) have little to no control over it. Some browsers give us the ability to customize their appearance but for most …
If you move from one page of a site without a scrollbar to another with a scrollbar, you’ll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar.
A classic fix was html …
A brief history of styling scrollbars:
-ms-scrollbar-base-color. These do not exist anymore.::-webkit-scrollbar
html {
overflow-y: scroll;
}This is invalid CSS, but it works in everything except Opera. The reason for this is to prevent “centering jumps” when navigating back and forth between pages with enough content to have a vertical scroll …
You are likely aware of the page centering technique of adding auto left and right margins to an outer div:
#page-wrap {
margin: 0 auto;
}One of the shortcomings of this technique is that when used on websites with …
