Creating a Page Scrolled Indicator with HTML, CSS and JavaScript | WEB DESIGN

I thought I would mix it up from my regular tutorial style videos and create a video on this web design concept of a Page Scrolled Indicator. This is really straightforward to develop and only requires basic knowledge of HTML, CSS and JavaScript.

A Page Scrolled Indicator informs the user of how much content they've already scrolled down on the page - you can think of it as a scrollbar.. with no scroll.

I've seen this on a few websites in 2018 and they all come in their different forms but in this video we create one that is a simple bar on the top of the document. I take you through the development process from start to finish to end up with the final product.

Support me on Patreon:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[rickyu]

fantastic. I was searching for this solution, one that I could actually understand vs the stackoverflow answers.

I am curious however; how performant is the scroll event listener? I am assuming it is being called every time the user scrolls and the function is constantly checking the condition... Anyway to make this more performant? i.e. if the div is scrolled to already, stop the event listener from listening? I use the vue frame work and i am constantly bullied into keeping things memory efficient.