Vanilla Css "Isolated Scroll" section
Hey all, really not sure what these are called, but I'd like to preferrably achieve this in a vanillacss/tailwind approach if possible.
Most implementations I've seen of these are generally using something like GSAP. Personal I'd hate to pull in something like GSAP for a singular use case.
I'd really appreciate any guidance/insights you may have! 🙏
https://twitter.com/i/status/1787253787922411541
🟢 gaurang.tsx (@Soham_Asmi) on X
What do you call these isolated scroll sections?
Anyone know of a vanilla css/tailwind way to handle this?
#buildinpublic #indiehackers
Twitter
5 Replies
I would assume it’s a container with
overflow: scroll; and then you can use webkit I believe to change the height and colour of the scroll barThat wouldn't just hijack the scroll for me tho right? I'd still have to use something like scroll snapping to isolate the scroll in the section right?
In the example those "localized" scrolls are used to "scrub" through the video on the right. I don't necessarily expect to use video, but I might opt for a gif instaed.
I haven’t really played around with it much but I think it’d automatically isolate it to that section
Gonna give it a try as soon as i get the chance will report back
Sounds good