CSS Scrollbar With Progress Meter

The scroll bar itself is a natural progress indicator. The position of the scroll bar directly reflects the scrolling progress of the scroll element (usually the entire page). But it's more like a progress indicator than a "fillable" progress bar.

We can use some CSS techniques to make the scrollbar "fill" when scrolling.

But this only applies to scrollbar style properties with -webkit- prefix. In other words, these attributes are non-standard. Standardized scrollbar style properties are scrollbar-width and scrollbar-color , which cannot achieve this effect, but may be safer in the long run. Still, the version with the vendor prefix may not go away, so if you think this is a strange form of progressive enhancement, that may be OK, either.

What are the skills?

Essentially, it is done by adding a huge box-shadow to the top of the scrollbar slider (or the side of the horizontal scrolling element).

 :root {
  --shadow: #43a047;
  --scrollbarBG: #eee;
  --thumbBG: #66bb6a;
}
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 15px 5px black;
}

Demo

The first time I saw this was in a Pen in Myk.

That example doesn't distinguish the slider part of the scrollbar at all, which makes it more like a progress bar, but also harder to use. My demo uses a slightly different color slider.

Can I really use this?

cannot! Apart from its very strange and non-standard. Safari browser crashes and I don't know how to fix it.

I do have a very relevant CSS trick, though.

I want to know more about scrollbar styles

OK, please see here.

The above is the detailed content of CSS Scrollbar With Progress Meter. For more information, please follow other related articles on the PHP Chinese website!