How to use CSS to achieve the following scroll bar effect?

It’s the yellow scroll bar at the top, which changes length as the page progresses.

You can take a moment before reading on. Try to think about the above effect or start to try, without the help of JS, can clever to achieve the above effect.

OK, go ahead. This effect is a similar small problem I encountered in the process of business development. In fact, even if I had to use Javascript, my first reaction was that it was a hassle. So I’ve been wondering, is it possible to do this with just CSS?

Analyze requirements

At first glance, it feels like the following scroll animation is not possible with CSS alone because it involves calculating the scrolling distance of the page.

If you want to do it in CSS only, you’ll have to go the other way, and use some clever methods.

Ok, so let’s do this step by step using some CSS tricks. Analyze the difficult points:

  • How do I know how far the user is scrolling and inform the top progress bar?

Normal analysis should look like this, but this is stuck in conventional thinking. A progress bar is just a progress bar, receiving the page scrolling distance and changing the width. What if the page scroll and the progress bar were one and the same?

Implementation requirements

Without keeping things secret, let’s use a linear gradient to do this.

Assuming our page is wrapped in , and the whole body can be scrolled, add this linear gradient from bottom left to top right:

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}
Copy the code

So, we can get an effect like this:

Wow, the color change of the yellow block is actually very expressive of the overall progress. At this point, if you’re smart, you should already know what to do.

We use a pseudo element to cover the extra parts:

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}
Copy the code

For the sake of demonstration, I changed the top white background to black transparent background:

The practical effect was this:

Eagle-eyed students may notice that after this, when you slide to the bottom, the progress bar does not reach the bottom:

The reason for this is that the linear gradient height of the body sets the size of the entire body. Let’s adjust the gradient height:

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}
Copy the code

This is done using calc and subtracting 100vh, which is the height of a screen, so that the gradient fits right into the upper right corner as you slide down to the bottom.

+ 5px is the height of the scrolling progress bar, leaving 5px in the space. And look at the effect, perfect:

So far, this requirement is perfect to achieve pull, is a good little skill, complete Demo:

CodePen Demo – Use a linear gradient to scroll a progress bar

I usually don’t write what others have written. I saw this technique a long time ago. I wrote this article at noon when I happened to use this technique in my business, without checking who invented this technique first. I didn’t know there was a similar article, so you can also check out this one:

W3C — Pure CSS implementation of Scroll Indicators

The last

It’s really just a very nice gradient and a very small technique. More interesting CSS you never thought of you can check out here:

Css-inspiration — CSS Inspiration

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

Ok, this article is over, hope to help you 🙂

If there are any questions or suggestions, you can communicate more, original article, writing style is limited, talent is shallow, if there is something wrong in the article, hope to inform.