You must have seen this on blogs, or articles of other kinds (what's the difference again?). Basically, you are (perhaps correctly) assumed to be o...
For further actions, you may consider blocking this person and/or reporting abuse
Isn't this... the scroll bar? Am I missing something, or does this add a redundant indicator to your sandbox demo?
I mean, I appreciate the technique and everything, but this is a problem that already has a solution, and it's available in every browser by default.
🤦♂️😂
Yes it is
scroll barbut we can implement in blogs where it will progress for the blog height and NOT the body height and hence can improve reading experience.Unless you have an unusually large footer, why would the two be any different? Blog posts are traditionally one per page.
Scroll progress barsor whatever they are called are something different than usual scrollbars. They are meant to please user and make your page look good. Unless it doesn't distract user or harms UX it's well and good.And yea..
It's a scrollbar but just kept horizontal and sticky to the top
That sounds like a web browser but with extra steps :)
A use case is for blogs where they have infinite scroll leading to the next post.
Not that I agree with infinite scroll but that is a valid use case as you can have a progress bar for each.
Other than that I do agree that there is little benefit (although aesthetically I do quite like the circular progress meter)
Looks good, but don't you want to debounce it? Doing
onscrollevents, even when something has just been draw in the same time-frame, is lots of extra calculations that slow it down.If you'd use something like
requestAnimationFrame, you can cut down on CPU/GPU usage dramatically, or even turn it off completely if the user isn't actively watching it.You can implement it in a way the
onscrollit'll check ifisScrolling, and if it isn't, go do the thing with arequestAnimationFrame. The function within that keeps calling itself with anotherrequestAnimationFrame, and keeps unsettingisScrolling.Thanks for the input. Yes, that is a very good point I had not thought about.
This is great in that it shows a non-dependent way to implement functionality that can be used in combination with other functionality such as adding a scroll-to-top button in the middle of the circular progress scrollbar, as demonstrated here - which is what I am attempting to build (unsuccessfully) in pure CSS.
codepen.io/dragontheory/pen/yLMKYmG
This combination could be convenient for users on mobile platforms or for small content subsections with overflowing content that would otherwise be difficult to control. Knowing when to apply innovation to convention for a better experience is the science of usability.
This has given me some good ideas (which is what this community is all about - sharing ideas).
Thank you for sharing!
Thanks for this.
To all those saying the native scroll bar serves the purpose - I will offer a few scenarios where this approach might be better :
In general, your gaze is likely to be on the content of the page, not to the right of the screen where vertical scrollbars are. Having a scrollbar near the content makes it easier for the user to catch it with their peripheral vision. And the scroll bar isn't a "progress bar" as such - as in, it's not a progress meter displaying the progress percent, it's a moving box, so the visual representations are different to start with.
Remember, because this meter is coded using CSS and JavaScript, you have complete freedom over how much of the page you actually consider to be relevant content. For example, on this particular dev.to article, with 18 comments, the comment section takes up more than half the vertical space. What if I was interested in knowing where the end of the post is (so that I can just jump to the sandbox and copy the code because otherwise my boss will fire me in a day), rather than how much the entire height of the document is? The native scroll bar will only show its location relative to the size of the whole document. Using a progress indicator like this could then alleviate that problem.
kkkmk