cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv headernumbered-list123split-screen
user profile image

I was interested to see if I could make a scroll indicator with just CSS.

You can! But maybe you shouldn't. This is an interesting consequence of a bunch of hacks held together with duct tape.

Having said that, hacks are not always bad. I love hacks and many of us have made quite a good living selling floats and clearfixes.

The techniques used here are well supported, if not conventional. If you can read the CSS, understand how it works, and how to change it, and you think this works better for you than JavaScript, feel free to implement it. Just be aware of the z-index behaviour and possible conflict with other CSS using negative z-index.

Comments

  1. yes, it might be hackish - but it's still clever business.

  2. Really very cool !!!

  3. Thanks! I think this be the most disgusting thing I've ever built. And I could not be more proud of that! It's an absolute Frankenstein of hacks. The accumulation of more than 10 years experience making CSS do things it shouldn't. :)

  4. This is amazingly clever. Kudos man. Taught me something new.

  5. Hey Mike,

    This is awesome - very elegant solution.

    One minor suggestion if you change the body background properties to have:

    background-size: 100% calc(100% - 100vh + 4px); background-position: 0 125px;

    The indicator will start at the far left rather than inset slightly.

    Cheers

    James

  6. @james_lelyveld Yes it will. I wanted it slightly inset so that you know it's there. Kind of a hint that there is a scroll indicator coming. It's probably not necessary to do that and either way should be fine.

  7. @MadeByMike - cool, I did wonder if that was the logic of starting slightly inset as the solution seemed too slick for that to be accidental.

  8. You just made my month.

  9. Very nice! :)

  10. Brilliantly simple/clever

  11. oh my, this is very clever trick :D

  12. this is amazing!!!

  13. Could you explain to your readers why this is "[…] a bunch of hacks held together with duct tape." when to the observer this is a very elegant solution?

    There's always been a strong case to make sure you put your work in HTML and CSS as being best practices, because they are a lot less fragile.

    JS on the other hand can be finicky, a maintenance nightmare and prone to just breaking (in the sense that a uncaught error could bring the whole show down; Not from your own fault mind you, but networks, middle men and browsers; One script failing to load due to just the transient nature of a mobile network?)

  14. NIIIIIICE HAAAAAACK!

  15. @nexii I've been considering removing that statement. It was slightly tongue-in-cheek but it is a bunch of hacks. There are some z-index hacks, gradient hacks, and tricks with calc and viewport units. Remember hacks does not == bad, it just means using something in an unintended way. Many of us have made quite a good living selling floats and clearfix hacks :).

    My only concerns about people using this are, maintainability, can you read it, quickly understand it and change it if required? The second is a z-index conflicts, I'd hate for people to implement this carelessly and have content disappear behind the masking layer.

    If you can avoid the above problems go for it!

  16. This is probably the biggest gradient I've seen on the web. It's so clear and easy to understand how it works when you remove the background: white from body:before. Clever!

  17. This really is genius.

  18. genius +1

  19. Hi, @MadeByMike

    I just replace the pseudo-element with multiple background-image.
    And then, we can just affect the body background. 💚
    http://codepen.io/Rplus/pen/dXgVpW?editors=0100

    (but some mobile browsers don't support background-attachment: fixed…)

  20. @Rplus That is an awesome idea. I love it! But after looking further into support for background-attachment I think this would discount most of the mobile browsers. Still a brilliant idea.

  21. Big Kudos! Just wondering about the z-index hack. The hack is, that you can't place something behind the body background with negative z-index?

  22. @Type-Style Anything with a negative z-index would appear behind the mask just like the gradient

  23. Damn, it's so smart!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...