Articles Tagged scrollbars

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”

animation scrollbars specificity

Link September 18, 2019

Two Browsers Walked Into a Scrollbar

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 scrolling. Styling them is handled in all sorts of different ways, including some very recent developments.

Follow Zach’s journey toward thinner, native, user-preference-respecting, more aesthetic scrollbars, particularly for element-level scrollbars that ends up here. … Read article “Two Browsers Walked Into a Scrollbar”

Our Notes / Read at www.filamentgroup.com

Article November 23, 2018

The Current State of Styling Scrollbars

Author

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 November 9, 2018

scrollbar-gutter

Author

Geoff Graham

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 November 2, 2018

What’s New In CSS?

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 the CSS portion of this journey will be best handled if it plays nicely with the HTML intrinsicsize stuff.
Matching without specificity. :where() is :matches() with no specificity, and :matches() may become :is().
Logical Properties shorthand. The team is

… Read article

Our Notes / Read at www.smashingmagazine.com

:matches aspect ratio CSS logical properties scrollbars

Link April 19, 2018

Scroll to the Future

scroll-behavior scroll-snap scrollbars

Robin Rendle

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

My favorite part of all though? It has to be this bit:

In the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of “cross-browser compatibility” is

… Read article

Our Notes / Read at evilmartians.com

Link April 1, 2017

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

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 a CSS trick, I don’t know what is.… Read article “`matrix3d()` for a Frame-Perfect Custom Scrollbar”

Our Notes / Read at developers.google.com

Article December 30, 2016

Designing for “Show scroll bars”

Author

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

macOS scrollbars

Snippet September 5, 2015

Hide Scrollbar in Edge, IE 10/11

Author

Robin Rendle

7 Comments

Join Conversation

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.… Read article “Hide Scrollbar in Edge, IE 10/11”