Scroll Shadows With JavaScript

Scrolling shadows are a good user experience design, and a small inner shadow will only be displayed when an element can scroll. Surprisingly, this can be achieved with CSS and is an example of CSS skills. However…it doesn't work on iOS Safari. It used to work, but it failed in iOS 13 and some other useful CSS features, without explanation for why, and has not been fixed , but it has now been fixed at least in July 2022 (thanks to Ronald!).

Here is a pure CSS example that you can see its effect in all browsers. The screenshot is as follows: (Screenshots should be inserted here)

I'm asking this question now because I've seen Jonnie Hallman mention it again in the blog. He mentioned it as a great little detail in May. In some interfaces, scrolling shadows makes a lot of sense.

Looking back, I thought of a solution that works currently, using scroll events. If the scrolling area has scrolled, the top and left shadows are displayed. If the scrolling area does not scroll completely, the bottom and right shadows are displayed. With this in mind, I tried the easiest, most direct, and least clever approach, which is to place empty divs on the top, right, bottom and left of the scrolling area. I call these "edges" and I observe them using the Intersection Observer API. If any edge does not intersect with the scrolling area, I can assume that the edge has scrolled and a shadow of that edge can be displayed. Then, once the edges intersect, I can assume that the scrolling area has reached the edge of the scrolling, so I can hide that shadow.

clever! Unfortunately, there is no online demo, but read the article for more details about the implementation.

Other JavaScript-based examples

But I think if you want to do this, you should choose the IntersectionObserver method. Hopefully, I can see someone put together the best parts of these ideas (hints on).

The above is the detailed content of Scroll Shadows With JavaScript. For more information, please follow other related articles on the PHP Chinese website!