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

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””


Custom Scrollbars Mixin

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.

There has been some updates and standardization to styling scrollbars. See The Current State of Styling Scrollbars for the lastest, which you could port to a mixin.

Still, Chrome and Internet Explorer … Read article “Custom Scrollbars Mixin”