Dynamic Scrollbar

[00:00:00]
>> Another common case where CSS can interact badly with JavaScript at least before custom properties, is the scrolling indicators, often we want to apply certain effects to indicate how far you've scrolled. How much do you have left? That sort of thing and previously, we had to set a bunch of CSS through JavaScript to update because there's no way for pure CSS to know how far you've scrolled.

[00:00:23]
There's nothing in CSS that gives us your scroll position. However, we can just write a little bit of CSS to set a scroll variable with a percentage of how far you've scrolled. So what this code does here right now, is it sets a scroll variable to scrollTop but that's not very useful as we've seen, because that just gives us a number of pixels.

[00:00:49]
What we want is a zero to one percentage of how far you've scrolled, that's much more reusable. So we can do that by calculating the maximum scroll by using scrollHeight, scrollHeight is the entire scrollable height of an element. And then we subtract the actual height of the element and we find the height of the scrolling area.

[00:01:16]
And then we divide scrollTop with the maximum scroll and we get a zero to one percentage again. Let's see how we can use that, so right now, we have a gradient background, that is just fixed to 20%. We have applied this JavaScript already, so we should have the scroll variable ready and we can go here and multiply our scroll variable, with a percentage.

[00:01:50]
And let's see, and now the background actually reflects how far I've scrolled. But if I don't want this kind of scroll indicator, if I want to change what it looks like, I can easily do that, I can change the background size. And the colors. Let's say, I wanna make it red and white here.

[00:02:24]
All right, I'm setting background image. Okay, and we want to only do repeat, actually we want no repeat, all right. And now we have a progress bar at the top, let's make it a little bit more narrow because that's huge. And then we could have a subtle progress bar at the top.

[00:02:56]
We could even change the hue, why not? We could have, Let's say, whoa, We could use scroll here as well and multiply it with. What should we multiply it with? Let's say, 360, so we go through the entire range of colors. Crazy progress bar, psychedelic progress bar, there it is, see?

[00:03:38]
The point is, we can do all these different things and we did not have to touch the JavaScript at all. This has been fun, but some people will be pulling their hair out, when they see this kind of JavaScript. I'm basically attaching a scroll listener on the document.

[00:04:00]
And I'm just using capture true, so that I can still use event delegation even though the scroll event doesn't bubble, that gives us a lot of flexibility. But it's kind of a performance nightmare, I am obligated to tell you, that you should not actually do this in practice.

[00:04:19]
You should only attach the event listeners on elements whose scrolling you actually want to monitor. In this case, you do need to trade in some flexibility. So, I hope that this section demonstrated that, By using custom properties even when you do need to use a little bit of JavaScript, they allow you to use the absolute minimal amount of JavaScript.

[00:04:52]
So that you can still write most of your CSS, in the actual CSS code where it belongs. I think especially because of this, CSS variables are a revolution for separation of style and behavior.