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
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
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
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 multiple pages, the layout can appear to "jump" a little bit when going back and forth between pages that require scroll bars and pages that do not. This is because the ~16px width of the scroll bar in the browser … Read article