Use pure CSS to achieve scroll shadow effect

To get straight to the point, there is a very common situation for some scrollable elements. Usually when scrolling, a shadow is added to the side perpendicular to the scroll to indicate that an element is currently scrolled out of the visible area, similar to this:

You can see that during the scrolling process, a shadow appears:

For the problem that the columns on both sides remain stationary and attached to the border during scrolling, CSS usually uses position: sticky to solve it.

However, for the shadow that appears during the scrolling process (if the content in the scrolling container is not touching the edge, the shadow appears, and if it is touching the edge, the shadow disappears), the previous approach has always required the use of JS.

So, is there a solution that can be achieved with pure CSS? Hehehe, yes. There is a very clever trick, let us unveil it step by step.

Magical background-attachment

To achieve the above scrolling shadow using pure CSS, the most important element to use is background-attachment .

In an earlier article - CSS parallax effect, background-attachment was introduced in detail. With the help of background-attachment: fixed , you can easily achieve scrolling parallax on the website or water ripple effects like clicking on an image, like this:

Of course, our protagonist today is not background-attachment: fixed , but background-attachment: srcoll .

background-attachment: srcoll

First, let’s talk about background-attachment . If background-image is specified, background-attachment determines whether the background is fixed in the viewport or scrolls with the block that contains it.

Simply put, it determines how the background pattern moves in a scrollable container. Through two simple demos, understand background-attachment: srcoll and background-attachment: local .

background-attachment: local , this is consistent with our daily usage, the background pattern of the scrollable container scrolls with the container:

background-attachment: scroll , this is the protagonist today, it indicates that the background is fixed relative to the element itself, rather than scrolling with its content:

If you still don't understand the difference between them, you can check out the following DEMO to see for yourself:

CodePen Demo -- bg-attachment Demo

Use srcoll and local together to achieve a trick

At this point, many students may still be confused. What exactly should we do? How does this relate to the scrolling shadow in this article?

Don't worry, the difficulty of scrolling shadows is that there is no shadow when there is no scrolling at the beginning. The shadow will only appear when the scrolling starts.

So here, we use the two properties of background-attachment: srcoll and background-attachment: local At the beginning of scrolling, we use two layers of background to overlap each other to hide the shadow background. When actually scrolling, we remove the overlapping part and only expose the shadow part.

Um? What's the meaning. We add two gradient effects to the scroll container, using background-attachment: srcoll and background-attachment: local respectively, and then superimpose them, like this:

<!-- Scrollable container -->
<ul>
    <li>...</li>
    ...
    <li>...</li>
</ul>

// Scenario 1:
.g-one {
    background: linear-gradient(#fff, #f00);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local;
}
 
// Scenario 2:
.g-two {
    background: radial-gradient(at 50% 0, #000, #0f0 70%);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
 
// Scenario 3:
.g-combine {
    background:
        linear-gradient(#fff, #f00),
        radial-gradient(at 50% 0%, #000, #0f0 70%);
    background-size: 100% 10px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

The actual effect is this: one background scrolls with the container, and the other background is fixed with the container. The background that scrolls with the container acts as an initial mask:

OK, you can see that when scrolling, the last superimposed picture is actually the effect we need to show different colors (shadows) when scrolling. We adjust the colors of the two gradients, set the mask layer ( background-attachment: local ) to white, and then use radial gradient to simulate the shadow color we want for the fixed shadow layer ( background-attachment: scroll ).

The CSS code looks like this:

.g-final {
    background:
        linear-gradient(#fff, transparent 100%),
        linear-gradient(rgba(0, 0, 0, .5), transparent 100%);
    background-size: 100% 30px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

A gray shadow is simulated using linear-gradient(rgba(0, 0, 0, .5), transparent 100%) :

OK, it’s done. For all the above DEMOs, you can check them out here:

CodePen Demo -- Pure CSS Scroll shadow

As shown at the beginning of the article, this technique can also be directly applied to table :

CodePen Demo -- Pure CSS Table scroll shadow

Some questions cascading order

Of course, there is actually a problem in the above process. Because the shadow is simulated by the background , the final effect is that the content is in the shadow (above the background), but the actual effect is not much different. If you can tolerate this, this solution is completely usable.

compatibility

Well, of course there is another problem, which is the compatibility of background-attachment . Let's look at CAN I USE:

The comments under Can i use indicate that most compatibility issues are caused by background-attachment: fixed , which has little impact on the effectiveness of this article.

at last

The techniques in this article are not original. I first saw them in this article: Exploring the practical value of the CSS attribute *-gradient, and further exploring whether it can be used in practice.

This is the end of this article about using pure CSS to achieve scroll shadow effects. For more relevant CSS to achieve scroll shadow content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!