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

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”

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