We have this open PR and I'd love to hear opinions on the value of a feature like this:
Reading position indicator
#1626
Is your feature request related to a problem? This is not a problem but I find nice that you have this bar that tells you the amount of scroll left until the end of the article.
Describe the solution you'd like
My solution is to add a progress bar inside the #top-bar in nav and depending in the current position of the scroll it will change the percentage of this progress bar. The idea will be also that the bar color is the same as the user profile color, in my case dark green.
How to see an example? (GIF at the bottom)
I created this code snippet that you can add in the Chrome Dev Tools > Sources > Snippets, and execute it with Ctrl+Enter (at least in Linux), be aware that you need to be in a post/article page for this to work.
const addProgressBarCSS = () => {
let css = document.createElement('style');
css.type = 'text/css';
css.innerHTML = `
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #0D4D4B;
}
progress::-moz-progress-bar {
background-color: #0D4D4B;
}
`;
document.querySelector("head").appendChild(css);
}
addProgressBarCSS()
let topBar = document.querySelector("#top-bar")
let articleElement = document.querySelector("article");
let readingBarElement = document.createElement("progress");
readingBarElement.id = "reading-bar";
readingBarElement.setAttribute("style", `
width: 100%;
position: absolute;
height: 5px;
top: 49px;
bottom: 20px;
left: 0;
right: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
color: #0D4D4B;
`);
readingBarElement.setAttribute("value", pageYOffset);
readingBarElement.setAttribute("max", articleElement.getBoundingClientRect().height);
topBar.appendChild(readingBarElement);
window.addEventListener('scroll', () => {
let currentScrollPosition = pageYOffset;
let readingBar = document.querySelector("#reading-bar");
let article = document.querySelector("article");
let articlePositions = article.getBoundingClientRect();
let start = articlePositions.y;
let end = articlePositions.height;
if (currentScrollPosition >= end) {
readingBar.value = end;
} else if (currentScrollPosition > start) {
readingBar.value = currentScrollPosition;
} else {
readingBar.value = 0;
}
});
Screenshot andd GIF explanation Gif link
This is the example:
My only technical concern here would be ensuring it doesn't add jankiness to the scrolling behavior, but otherwise this is more of a UX discussion.
Feel free to weigh in.
Latest comments (48)
So long as it looks like the pointer on the Big Wheel of The Price is Right, I'll buy in to anything.
The scroll bar is a a progress bar for down the page. If you fold the comments away until a button is clicked then they aren't a factor in the scrollbar length.
This feature is available in Pocket. I think it'd be really useful when reading dev.to articles.
Although there is a time indicator for how long it would take to read the article, it's not that accurate since everyone's reading speed varies.
I usually read a bit of the article to determine if I'm gonna read it. A reading indicator will let me know if it's short enough to read immediately or a little longer to save for later.
I normally find it useful in blog posts, because if I have no much time and I see a lot of progressbar remaining, I save it for later.
I think there isn't much need for them usually. And I think there might be features more important that people would be more interested in seeing.
On mobile it works well with a scroll-to-top float button. I'm trying to find a site where this was implemented, but I really enjoyed the indicator + top button combination. It was a site to read novellas so it really helped to quickly know how much I'd covered.
Considering the only thing this does is visually alert you to how much of an article you've read. Perhaps it might not be so useful as a lot of posts here are usually short reads. I tend to think I would need it if I was reading a 15k words article. At most an estimate of the reading time is a better visual indicator in my opinion.
Just curious, how does dev.to fair for accessibility towards screen readers and other enhancements for people with disabilities?
Personally not a fan as it distracts me and I find it unneccesary.
I find it makes me want to reach the end of the article quicker which is a pain but some people like it...i assume so maybe make it optional?
I think you should do something different than a progress bar.
Minutes to read and a donut chart (like Twitter character limit) as you scroll. It would take up less space, and would convey two things. Additionally you could let users set there words per minute to determine the minutes.
I agree that it would be great for accessibility, but I think there should be an option to disable it in one's profile because it can also be super distracting
In my opinion, this would not have any relevance inside the post view while I am ready. But on the list view, this might help me to complete my half read posts if any :)
It might help me decide when an article becomes TL;DR. Beyond that I can't see a lot of use for it.
Very useful for long articles but I would consider adding in the user settings the option to disable.
Personally, I like them. I can see how it would benefit when reading articles over the phone (currently have to scroll up-and-down to see where I'm at.) In addition, I would prefer it it to be a user settings, then everyone who does not like it can just turn it off.
I'm done with it so long as there's a setting to disable it. On a note of personal preference, the indicator as mocked up in the article, I often confuse these with loading bars. So it should be thoughtfully designed so as not to confuse users. With those points in mind I'm all for it if it helps people.
I don't want this feature myself, but after reading some comments here I can see benefits to others.
I'd merge the PR and make it configurable through the user settings.
The default setting should be disabled.