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)
Infinite scroll breaks browser scrollbar functionality, and trying to implement your own begs the question, why choose infinite scroll in the first place?
Hence why I said I don't agree with it, not a fan of infinite scroll myself due to accessibility issues it causes, but we are currently conversing on a site that uses infinite scroll for the home page feed so I suppose beggars can't be choosers 😋
The home page here breaks browser functionality, but it's not really a problem because we're not reading a single article. The proposed solution in this post doesn't apply as far as I can tell unless you want a little indicator of your position in every blog post - and in turn that requires every blog post to be rendered in full rather than as a teaser card, otherwise they'd all say you were 100% of the way through.
I think I am not being clear, that part was me joking about the prevalence of infinite scroll, I was not meaning to link it to the article or having infinite scroll on actual posts.
I am also agreeing with you that there is no need for this on most sites and all i offered was one scenario (one which I am not a fan of!) where this could be useful as scroll position couldn’t be correlated with article length.
Hope we are clear now as we arguing a point from the same side of the fence!
Gotcha :)
Scroll progress baris really helpful when the site hides the natural scroll func. from the user and it scrolls on some logic:Example: Online Courses or Q&ABut what if the site didn't hide the native scroll bar? Wouldn't that be better?
I agree. Have always found it a stupid addition to blog websites. I don't see why it matters how far i've scrolled down.
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