First, scrollbars are a usability and accessibility thing. Second, a rule of thumb: if an area scrolls, it should have a visible scrollbar. But the web is a big place and I like tricks, so I’m going to cover the …
How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I …
CSS still can’t animate to auto dimensions.
.dropdown {
transition: 0.2s;
height: 0;
}
.dropdown.open {
/* the height will change, but it won't animate. */
height: auto;
}There is JavaScript trickery you can try. Brandon Smith outlined several …
Surprise: scrollbars are complicated, especially cross-browser and cross-platform.
Sometimes they take up space and sometimes they don’t. Sometimes that is affected by a setting and sometimes it isn’t. Sometimes you can see them and sometimes you can’t unless you’re actually …
If you need to style your scrollbars right now, one option is to use a collection of ::webkit prefixed CSS properties.
Sadly, that doesn’t help out much for Firefox or Edge, or the ecosystem of browsers around …
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 …
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.
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 …
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 …
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.…
