Scroll Shadows with JavaScript

Scroll Shadows with JavaScript

css-tricks.com css-tricks.com2 weeks ago in#Dev Love39

Scroll shadows are when you’ll be able to see slightly inset shadow on components if (and provided that) you’ll be able to scroll in that path. It’s simply excellent UX. You can in reality pull it off in CSS, which I believe is fantastic and one of the crucial nice CSS methods. Except… it simply doesn’t paintings on iOS Safari. It used to paintings, after which it broke in iOS 13, alongside with another helpful CSS issues, with no reasons why and hasn’t ever been fastened. So, now, for those who actually need scroll shadows (I believe they’re further helpful on cellular browsers anyway), it’s most likely very best to succeed in for JavaScript. Here’s a natural CSS instance so you’ll be able to see it paintings in all browsers with the exception of iOS Safari. Screenshots: I’m bringing this up now as a result of I see Jonnie Hallman is running a blog about it once more. He discussed it as a great little element again in May. There are sure interfaces the place scroll shadows actually further make sense. Taking a step again, I believed concerning the resolution that these days labored, the use of scroll occasions. If the scroll house has scrolled, display the highest and left shadows. If the scroll house isn’t all of the manner scrolled, display the ground and proper shadows. With this in thoughts, I attempted the most straightforward, maximum straight-forward, and least artful way through placing empty divs on the best, proper, backside, and left of the scroll spaces. I known as those “edges”, and I noticed them the use of the Intersection Observer API. If any of the sides weren’t intersecting with the scroll house, I may just think that the brink in query have been scrolled, and I may just display the shadow for that edge. Then, as soon as the brink is intersecting, I may just think that the scroll house has reached the brink of the scroll, so I may just cover that shadow. Clever artful. No are living demo, sadly, however learn the submit for a couple of further main points at the implementation. Other JavaScript-powered examples I do assume for those who’re going to do that you must cross the IntersectionObserver path despite the fact that. Would love to peer anyone port the most efficient of those concepts all in combination (wink wink).  » Read More

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply