Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
scrollbars

17 Articles
{
,

}
Direct link to the article Scrollbars on Hover
hover scrollbars

Scrollbars on Hover

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 …

Avatar of Chris Coyier
Chris Coyier on Jan 20, 2021 (Updated on Jan 26, 2021)
Direct link to the article That’s Just How I Scroll
scrollbars scrolling ux

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 …

Avatar of Chris Coyier
Chris Coyier on Aug 14, 2020
Direct link to the article Hide Scrollbars During an Animation
animation scrollbars specificity

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 …

Avatar of Chris Coyier
Chris Coyier on Jun 24, 2020 (Updated on Jun 25, 2020)
Direct link to the article Two Browsers Walked Into a Scrollbar
scrollbars

Two Browsers Walked Into a Scrollbar

Direct Link

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 …

Avatar of Chris Coyier
Shared by Chris Coyier on Sep 18, 2019
Direct link to the article The Current State of Styling Scrollbars
scrollbars

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 …

Avatar of Chris Coyier
Chris Coyier on Nov 23, 2018 (Updated on May 8, 2020)
Direct link to the article scrollbar-gutter
scrollbars

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 …

Avatar of Geoff Graham
Geoff Graham on Nov 9, 2018 (Updated on Apr 18, 2019)
Direct link to the article What’s New In CSS?
:matches aspect ratio CSS logical properties scrollbars

What’s New In CSS?

Direct Link

Rachel hooks us up with what the CSS Working Group is talking about:

  • Styling scrollbars. This would come with properties like scrollbar-width and scrollbar-color. The best we have right now is proprietary WebKit stuff.
  • Aspect ratios. I imagine
…
Avatar of Chris Coyier
Shared by Chris Coyier on Nov 2, 2018
Direct link to the article Scroll to the Future
scroll-behavior scroll-snap scrollbars

Scroll to the Future

Direct Link

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 …

Avatar of Robin Rendle
Shared by Robin Rendle on Apr 19, 2018 (Updated on Aug 7, 2018)
Direct link to the article `matrix3d()` for a Frame-Perfect Custom Scrollbar
scrollbars

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

Direct Link

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 …

Avatar of Chris Coyier
Shared by Chris Coyier on Apr 1, 2017
Direct link to the article Designing for “Show scroll bars”
macOS scrollbars

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
…
Avatar of Chris Coyier
Chris Coyier on Dec 30, 2016 (Updated on Jan 5, 2017)
scrollbars

Hide Scrollbar in Edge, IE 10/11

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.…

Avatar of Robin Rendle
Robin Rendle on Sep 5, 2015 (Updated on Jan 5, 2017)
  • 1
  • 2
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top