Scroll Shadows With JavaScript

No Comments

Scroll shadows are when you possibly can see just a little inset shadow on components if (and provided that) you possibly can scroll in that course. It’s simply good UX. You’ll be able to really pull it off in CSS, which I feel is superb and one of many nice CSS methods. Besides… it simply doesn’t work on iOS Safari. It used to work, after which it broke in iOS 13, together with another helpful CSS issues, with no reason and has by no means been fastened.

So, now, for those who actually need scroll shadows (I feel they’re additional helpful on cellular browsers anyway), it’s most likely greatest to succeed in for JavaScript.

Right here’s a pure CSS instance so you possibly can see it work in all browsers besides iOS Safari. Screenshots:

I’m bringing this up now as a result of I see Jonnie Hallman is running a blog about tit once more. He talked about it as an superior little element again in Could. There are specific interfaces the place scroll shadows actually additional make sense.

Taking a step again, I believed in regards to the answer that at present labored, utilizing scroll occasions. If the scroll space has scrolled, present the highest and left shadows. If the scroll space isn’t all the way in which scrolled, present the underside and proper shadows. With this in thoughts, I attempted the only, most straight-forward, and least intelligent strategy by placing empty divs on the high, proper, backside, and left of the scroll areas. I known as these “edges”, and I noticed them utilizing the Intersection Observer API. If any of the sides weren’t intersecting with the scroll space, I might assume that the sting in query had been scrolled, and I might present the shadow for that edge. Then, as soon as the sting is intersecting, I might assume that the scroll space has reached the sting of the scroll, so I might conceal that shadow.

Intelligent intelligent. No reside demo, sadly, however learn the put up for a number of additional particulars on the implementation.

Different JavaScript-powered examples

CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback

I do suppose for those who’re going to do that you must go the IntersectionObserver route although. Would like to see somebody port the perfect of those concepts all collectively (wink wink).

The put up Scroll Shadows With JavaScript appeared first on CSS-Tips. You’ll be able to assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment