Scroll shadows are when you can see a little inset shadow on aspects if( and only if) you can scroll in that guidance. It’s just good UX. You can actually pull it off in CSS, which I think is amazing and one of the great CSS subterfuges. Except … it precisely doesn’t work on iOS Safari. It been working, and then it interrupted in iOS 13, along with some other helpful CSS things, with no explanation why and has never been fixed.

So , now, if you really want scroll shadows( I think they are additional beneficial on mobile browsers anyway ), it’s probably best to reach for JavaScript.

Here’s a pure CSS example so you can see it work in all browsers except iOS Safari. Screenshots 😛 TAGEND

I’m drawing this up now because I find Jonnie Hallman is blogging about tit again. He mentioned earlier as an breathtaking little detail back in May. There are certain boundaries where scroll shadows truly extra make sense.

Taking a step back, I thought about the solution that currently drove, abusing ringlet incidents. If the move neighborhood has moved, indicate the top and left palls. If the ringlet province isn’t all the way scrolled, establish the bottom and right shadows. With this in mind, I tried the simplest, most straight-forward, and least adroit coming by place vacate divs at the top, right, bottom, and left of the scroll arenas. I called these “edges”, and I mentioned them working the Intersection Observer API. If any of the edges were not intersecting with the scroll neighborhood, I could assume that the edge in question had been moved, and I could indicate the pall for that line. Then, once the edge is intersecting, I could assume that the scroll arena has reached the edge of the move, so I could conceal that shadow.

Clever clever. No live demo, unfortunately, but read the announce for a few extra details on the implementation.

Other JavaScript-powered examples

I do think if you’re going to do this you should go the IntersectionObserver route though. Would love to see someone port the best of these impressions all together( glimmer winking ).

The post Scroll Shadows With JavaScript sounded first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read more: css-tricks.com