Pure CSS scrolling shadows

[swanson]

In the past I've come across this approach: https://chrisdermody.com/tailwind-css-static-navbar-with-shadow-on-scroll/ but I disliked that it needed Javascript

This evening I found this:
https://css-scroll-shadows.vercel.app/?bgColor=ffffff&shadowColor=666666&pxSize=16
https://lea.verou.me/2012/04/background-attachment-local/

Looks like there was bad support in iOS until 2022 so maybe that is why it isn't more popular?

While some of the styles can be composed with default tailwind utilities, I couldn't get it to exactly match without dropping down to raw CSS. I think this pattern is super common for web applications (thus justifying not being a plugin) and would love for it to be supported in Tailwind ❤️

I think even a tutorial/article for styling scrolling elements in a list that covers shadows, customizing the actual scrollbar, and pragmatic use of snapping and scroll margin could be super nice.

[swanson]

Screen.Recording.2023-02-06.at.9.02.28.PM.mov