Transcript from the "Dynamic Scrollbar" Lesson
[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: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: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: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.