Skip to main content
CSS is fun and cool and I like it.

That’s Just How I Scroll

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 don’t think anyone is confused at what a scrollbar is or what it indicates.

But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default and only shows them during scroll. Most mobile browsers don’t have … Read article “That’s Just How I Scroll”


Hide Scrollbars During an Animation

CSS still can’t animate to auto dimensions.

.dropdown {
  transition: 0.2s;
  height: 0;
} {
  /* the height will change, but it won't animate. */
  height: auto;

There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back. My mind always goes to this solution just because it’s so simple:… Read article “Hide Scrollbars During an Animation”


Two Browsers Walked Into a Scrollbar


The Current State of Styling Scrollbars

If you need to style your scrollbars right now, one option is to use a collection of ::webkit prefixed CSS properties.

CodePen Embed Fallback

Sadly, that doesn’t help out much for Firefox or Edge, or the ecosystem of browsers around those.… Read article “The Current State of Styling Scrollbars”



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 “scrollbar-gutter”


What’s New In CSS?


Scroll to the Future


`matrix3d()` for a Frame-Perfect Custom Scrollbar


Designing for “Show scroll bars”

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:

  • Automatically based on mouse or trackpad
  • When scrolling
  • Always

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 “Designing for “Show scroll bars””