DEV Community

The Scroll Indicator

Dhilip kumar on May 01, 2019

Scroll Indicator is basically a line which fills up based on how much the user has scrolled in the page.They are usually positioned at the Top of...
Collapse
 
larsklopstra profile image
Lars Klopstra ⚡

Why not transform: scaleX();?

Collapse
 
dhilipkmr profile image
Dhilip kumar

Yes, that should also work. Also that avoids adding (*100) to the percentage calculation.

I just went with the simplest approach.In transform people might have to look into transform properties as well.

Collapse
 
larsklopstra profile image
Lars Klopstra ⚡

Haha, I'm all about that micro performance 😛

Thread Thread
 
dhilipkmr profile image
Dhilip kumar

I wasn't aware that it has an impact on performance.

Thread Thread
 
xavortm profile image
Alex Dimitrov

Transform properties require GPU calculations which are faster. Some more reading here - smashingmagazine.com/2016/12/gpu-a... The good thing here is that the div is detached from the box model of the page, so at least it will not do global recalc ^

Thread Thread
 
dhilipkmr profile image
Dhilip kumar

Hmmm, thats an interesting read! :)

Collapse
 
thebouv profile image
Anthony Bouvier

So, I'm going to ask:

Why?

What is the UX benefit of this?

Notice that even in your GIF, the right hand scroll bar also shows you relative distance to end of the document.

Now two things are moving as I scroll down the page; your bar and the browser's bar.

If this was requested by a product owner or suggested by my dev team, I'd ask: why?

Collapse
 
damengrandom profile image
Dameng

Hi author, I got one question, which is how to remember the current scroll position, so when refresh page, the bar progress still display, instead of display nothing?

Collapse
 
klashe profile image
Tolase Kelvin Adegbite

Anyone knows how to use this to track a post in Ruby on Rails?

Collapse
 
jelanithompson profile image
Jelani Thompson

Thanks dude this article was super helpful 👍🏾