Yogesh Chauhan's Blog

Learn how to add Scroll Indicator using CSS and JavaScript?

in CSS & JavaScript on July 6, 2019

In this blogpost I am going to show you how to create a scroll indicator so when your blog users are reading any article on your blog, they will have an indicator indicating how far they have read and how much more article remains to read. It’s a really handy tool to use in the process of overall user engagement.

First of all let’s just start with HTML code and go ahead from there.

In the HTML code above, we have added some div elements. The first one is with class=header and second one is with class=progress-container and the third one with class=progress-bar.

Let’s write down some CSS code and then I’ll link the HTML and CSS code.

Now the first div is the header which will have a fixed position and we want the header in front of all other elements so I’ve set the z-index as 1. You can set the color, background and alignment as you like.

The second div is the progress-container which is the whole area of progress-bar + header. The header has z-index set as 1 so you won’t be able to see it in front.

The third div is progress-bar which will actually indicate the progress and for that we need to write down some JavaScript code.

NOTE: The div with class=content is just for contents and you can go ahead and set the style as you like.

In the JavaScript code above, I am using window.onscroll event to call a function. In the function, we are using just simple math to see were the user actually is on the current page. In winScroll, we save the number of pixels an element’s content is scrolled vertically using scrollTop property.

we save height of the element or the whole body in pixels using scrollHeight property. And then we calculate the percentage of the scrolled area of the page in the variable scrolled by using simple math.

At the end we just add the percentage of that occupied element or body to our HTML element’s width using style.width . That’s it. Simple and interactive and handy tool!

Credit goes to w3schools

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
The 8 Golden Rules of Programming I Have Learned in My CareerMiscellaneousColumn and Table Alias in PostgresPostgresFETCH clause in PostgreSQLPostgresIntroduction to components and templates Part 4: Pipes and DirectivesAngularHow to remove WordPress TinyMCE Editor buttons?WordPressUseful (and probably ignored) HTML tags: Part 1HTML