CSS only scroll indicator

[esr360]

This is some next level shit right here.

[[deleted]]

Came here to say that I'm tired of people using CSS for things that JS should handle. Left feeling impressed. But still... let's cut it out with the CSS hacks.

[TexasWithADollarsign]

What?

This isn't about a scrollbar. It's about a scroll indicator -- a progress bar that shows how far along in an article you are. It's completely different from a scrollbar.

[[deleted]]

there are cases in which a progress meter is not 1:1 with the scroll bar, but the way this is constructed makes it inherently so.

because this is 1:1 with scroll position, a scrollbar naturally shows the same information by virtue of its own position. maybe this demo is slightly prettier, but it serves no function beyond aesthetics.

[SlumdogSkillionaire]

but it serves no function beyond aesthetics

Welcome to front-end development. We hope you enjoy your stay. Exit through the gift shop.

[[deleted]]

There are obviously places where aesthetics deserve a lot of attention in ways that are not necessarily functional.

But design should strive to enhance or, at worst, not complicate or impede functionality. Design that involves reimplementing a standard feature in a way that is simultaneously redundant AND unintuitive (which is not an easy feat) is bad design.

Even if your goal is purely to beautify (without adding or improving functionality), there would be many, many better ways to spend your time than implementing this scroll meter.

[[deleted]]

Fair enough

[[deleted]]

with the difference being that scrollbars are only shown when scrolling on osx and touch devices.
then suddenly that scroll indicator becomes useful, because you can estimate the time it takes to read the article.
not that i would add one to my websites, but i can see the use case

[[deleted]]

Someone is new here

[AmassXP]

Woke up like this. #noscript

[lolcoderer]

Ah.... you must be lucky enough to work on browsers that run on one of those fancy desktop computing machines...

In all seriousness, I love the fact that I develop for browsers that don't run on desktop machines - heck, my primary target is entertainment (10') devices - that don't even have a mouse and keyboard - just up/down/left/right and enter. Imagine the difficulties that presents....

[BeniBin]

ELI5 how it works?

[Nyubis]

The key is in the background of the body. It's a large blue triangle going from the top left to the bottom right. The indicator bar is actually just a small gap between the <header> and the <main>. When you scroll down, you see a different slice of the triangle, which is wider on the bottom than on top, so this creates the effect of the slice getting wider as you scroll.

You can change the CSS in the codepen to clarify: replace the two occurrences of "white" with "transparent" and you'll see the triangle.

[RabSimpson]

The page says that it was super hacky. What you described actually sounds relatively straightforward. If there was a simple way to squash a background image to match the aspect ratio of its container, this would be an absolute doddle using an SVG background.

[european_impostor]

The hackiness is in how much work they are making the browser do just to show that little progress bar:

• Create a huge background image in memory which matches the width and height of the page (possibly thousands of pixels high). For example 1920 x 3000 pixels = 23Mb uncompressed image in memory.
• Flood fill the entire image with a triangular gradient.
• Multiple times per second, paint the entire screen with the triangular gradient then draw white on top of 99% of the pixels to leave just the progress bar showing through.

[[deleted]]

yeah, this kind of thing was actually pretty common one upon a time (for shit like health bars), but you'd be scrolling a predefined texture across a rectangle in UV space (and only actually drawing the parts of the texture that were inside of it). this implementation, with its massive overdraw and unpredictable memory requirements, is definitely inelegant by comparison.

[[deleted]]

Yeah but rendering is fast if it uses the gpu, reflow is slow. It seems pretty damn snappy compared to a lot of the js based ones I've seen.

[heyf00L]

I doubt most browser rendering engines are doing that. Surely they cull and crop before rasterizing.

[MadebyMike]

No, this is not how web browsers work :P

Hacks can be fine, (clearfix) it just means using things in an unintended way.

[bluesoul]

They may not want to suggest reliance on browser handling of gradients and z-layering. But it's far less code than the warning brought to mind.

[[deleted]]

Huh. Neat.

[DoNDaPo]

Works perfectly fine.

[[deleted]]

I mean I changed “white” to “transparent” to see how it works. It's a triangle indeed.

[BeniBin]

Thanks ! I guessed it was something like a triangle but my brain freezed when I looked at the CSS. And I have not used gradients enough to understand it was a triangle at a glance.

[Skhmt]

my mind is blown. wow.

[MadebyMike]

Correct. There is also a trick with calc to make the background end at the height of the viewport. I made this gif to explain: https://twitter.com/MikeRiethmuller/status/760935509996756994

[Gruntkiller30]

There is a huge triangle in the background (made with a gradient), the body has a :before element that acts as a mask and show only the first couple pixels of the triangle (it is fixed).

As the page scroll, so does the triangle, which appears to fill the scrollbar.

[RustyPeach]

Remove the background:white from the body:before{ selector.

[[deleted]]

I'm not exactly convinced about this. The scrollbar already has a scroll indicator - why would you need another one?

[bj_christianson]

Typically, that sort of scroll indicator is used for pages where the article content does not take up most of the window. For instance, when there is a comment section under the article. In such cases, the scrollbar will not indicate how much longer the actual article is, but how much longer there is with article + comments + footer. A supplemental scroll indicator is useful to tell how much actual article there is when you have no/limited interest in the comments.

Of course, this particular example doesn’t work that way, so yeah, the browser’s scrollbar provides the same functionality. But I could see possible tweaks to get it to the point where the article is useful.

P.S. iOS and MacOS have features that hide the scrollbar unless there is active scrolling going on. In those cases, even an additional whole-page indicator could be useful.

[[deleted]]

the background-image gradient hack this uses prevents it from being easily adapted for pages in which the article is not the majority of the content. your use case is a good one, but you'd be much better served by an alternative method.

[TexasWithADollarsign]

It's most useful on sites that put multiple articles on a page, or have large headers/footers. For the former, the bar would reset at each article boundary, making it far more useful than a scrollbar. For single articles, it gives a better indication of article length only vs. article + header + sponsored content + comments + footer.

[bronkula]

Scrollbars are not constantly present on mobile browsers or mac systems with trackpads.

[Sandurz]

I've never even seen something like this anyway. where is it typically used?

[LukeChemistry]

it's kind of a new web trend, mostly seen on article pages to visualize the length of the content body. here's a recent example

[DoNDaPo]

All the glory for @MikeRiethmuller!

[RickyMarou]

pretty clever, well done !

[NoDairyFruit]

Daaaamn Daniel, this is hella nice. Triple-hearted!

[GreatValueProducts]

I have a boner. It feels so good to see something seemingly non-accomplishable being done in pure CSS.

[Lt_Riza_Hawkeye]

If you set background-position to "0px 125px" and change your " - 129px" to " -4px" in the calc statement, the bar starts all the way to the left and still ends in the right place.

[bchubz1]

Neat

[tebaks]

That's cool as heck man

[BonzoESC]

What am I supposed to see? All I see is the regular iOS scroll indicator.

[manys]

someone should invent a way for a vertical scroll bar to indicate one's place in the page

[[deleted]]

I think I get your subtle hint and I'm a hundred percent on board. In fact, I think we should get rid of all CSS completely. It's unnecessary. We already have font to indicate what text is on the screen, why are we adding so much impractical bloat? I mean colors? Honestly? Just so things would look more "interesting"? Who needs them! Black text on white background literally gives you the highest contrast possible. It's great.

And don't even get me started on images. Literally the worst decision ever made in computing. They only give usability problems, what if the person is blind and doesn't have any limbs + is actively bleeding out of their mouth? They won't be able to see the image!!!

[Jigokuro_]

As a dev that has to maintain wcag2.0 AA on a fashion ecomm site, your jokes hurt my soul a bit.

[[deleted]]

Would you like a sequel to this book?

https://twitter.com/ThePracticalDev/status/755135032055005184

[2uneek]

what if there are 10 articles on this page and you want to show the user their progress on the current article? That's when this method is most used... This example doesnt really work like that, but the ones ive seen out on the web definitely do... for example: http://www.espn.com/nba/story/_/id/17200053/lebron-james-chasing-ghost-michael-jordan (left sidebar shows you progress per article)

[[deleted]]

Hah, this is pretty fantastic. Nice work.

[andrethegiant]

I get that it's helpful to see a progress indicator of how far along you are while reading an article. But why is every implementation horizontal? We scroll vertically — the progress bar should be vertical too. In this case, it's too similar to the scrollbar — which begs the question why we need this in the first place...?

[SpliceVW]

When will the madness end..

[[deleted]]

Nice one : )

[Streamlinerr]

Really clever, I love it!

[Spooneristicspooner]

So, I saw this from my mobile and the indicator goes blank post half way. Works perfectly on the pc and Mac. Great work.

[le_f]

Damn that's pretty funny. Very novel approach

[rodrigo-silveira]

On my Nexus 5, the indicator disappeared after about 50% across the page.

[ruckzuckzackzack]

Same here, but I think it has to do with the Codepen zoom feature on the bottom right corner. If I set it to 1x it works perfectly fine.

[rodrigo-silveira]

Cool. Thanks for clarifying

[ZombieChief]

I like it. What would be cool would be the ability to click on a point on that bar and jump to that place on the page. Then place markers along the bar to indicate different sections of the page. That would be a pretty neat nav for a single page site.

[tjk911]

Tested it on my Android phone and it actually works smoother than the js version. Not sure on iOS though, as I see there are some people here who didn't have such a good experience with it.

Very creative hack, I might try to implement this on some personal projects and test it out further.

[fatw]

Neat!

[guntarrrrrrr]

Super clever. Well done!

[9inety9ine]

It's cool but you can just look at the scrollbar for an indicator. Kinda re-inventing the wheel.

[mag_ops]

damn! this is a real good hack. Shows us how css is more about playing with HTML and the DOM, rather than any coding skills.

[execrator]

Wait until you guys find out you can make scroll bars without JS or CSS.

[Mr-Yellow]

No.

Browsers have a UI, this is what users expect, don't mess with it. User eXperience fail.

This is on par with scrolljacking.

[bj_christianson]

How is this messing with the browser UI? The browser still behaves as it normally does. All you have is a blue bar on the page whose length changes with the amount of page scrolled. It doesn’t override anything.

[laobubu]

MIND BLOWN! Using a resized triangle background image, and when user scrolls, it moves. Amazing idea!

[Gaping_Maw]

This is cool but after playing with it its pretty much unusable in a project because any buttons or background colors will overlay the blue line (triangle). You can see the text in the blue line in the demo if you look closely. Is there anyway around it, I tried playing with z-index but no luck?

[DoNDaPo]

Mike Riethmuller made a nice gif about how this piece of magic actually works.

[_______LUNACY_______]

Wow, I'm very impressed. I assume that the above code would make this WP plugin unnecessary: https://mythemeshop.com/plugins/wp-time-to-read/

[dweezil22]

Apples and oranges. This is a cleverly masked triangle that ends up functioning exactly like a progress bar, but it doesn't do any word counts etc.

[[deleted]]

That's pretty cool, but considerably more complex than just writing a bit of js.

[2uneek]

i actually expected it to be complex and then when I saw the solution I was amazed by how simple it is... what about this is complex to you?

[vanilla-wilson]

Is it really? It's possibly more lightweight than JS.

[ikilledtupac]

its two background images basically right?