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

Hide Scrollbars During an Animation

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

Link

Two Browsers Walked Into a Scrollbar

Article

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”

Almanac

scrollbar-gutter

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”

Link

What’s New In CSS?

Link

Scroll to the Future

Link

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

Article

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

Snippet

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”