It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
If you need to style your scrollbars right now, one option is to use a collection of ::webkit prefixed CSS properties.
See the Pen CSS-Tricks Almanac: Scrollbars by Chris Coyier (@chriscoyier) on CodePen.
Sadly, that doesn't help out much for Firefox or Edge, or the ecosystem of browsers around those. … Read article
The scrollbar-gutter property provides flexibility to determine how the space the browser uses to display a scrollbar that interacts with the content on the screen. The spec describes it "reserving space for the scrollbar" and that makes sense since that's what a gutter ultimately is: a container that reserves space for whatever is in it and separates it from other elements.… Read article
Rachel hooks us up with what the CSS Working Group is talking about:
scrollbar-width and scrollbar-color. The best we have right now is proprietary WebKit stuff.intrinsicsize stuff.:where() is :matches() with no specificity, and :matches() may become :is().
This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView() and the scroll-behavior CSS property.
My favorite part of all though? It has to be this bit:
… Read articleIn the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of “cross-browser compatibility” is
Das Surma:
In this article we will leverage some unconventional CSS matrices to build a custom scroller that doesn't require any JavaScript while scrolling, just some setup code.
If turning a scrollbar into a Nyan cat with near-perfect functionality isn't a CSS trick, I don't know what is.… Read article
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:
Which means you are either in a state where you see them all the time, or a state where you only see them once scrolling has been started through some other means. … Read article
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.… Read article
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 browsers including Firefox it just is not possible.
Still, Chrome and Internet Explorer (yes) make it possible for us to define custom styles for scrollbars. However the syntax horribly complex, and of course, definitely not standard. Welcome to the proprietary … Read article
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 { overflow-y: scroll; } to force the scrollbar all the time. Ayke van Laëthem has found a more elegant solution in html { margin-left: calc(100vw - 100%); } which works because vw accounts for the scrollbar and % doesn't, and... … Read article
The scrollbar set of CSS properties is a proprietary style hook from Internet Explorer 5.5, which let designers create custom themes for the browser's native scrollbars. Currently, it is exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine. This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article.
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px