Scroll Trapping
Hi all - hoping someone can help me crack this. I've searched around but haven't found a solid example or demo.
Goal: Using CSS/HTML/JavaScript (Tailwind available but optional), I would like to achieve the following scroll behaviour:
Initially the page scrolls normally.
However, when user reaches a particular section that contains a fixed-height box with overflow: auto/scroll, the page stops scrolling normally and the scroll is "trapped" inside that box instead (so now user's scroll up or down action should only scroll up or down content inside the box).
Once the user hits the bottom (or top) of the box, normal page scrolling resumes and continues past the section.
Is this achievable? If so, could someone point me to a demo, CodePen, or an approach/documentation?
Also, what's the correct name for this effect, if there is one? Chat GPT suggested terms like scroll trapping, scroll lock, nested scroll, but I'm not sure what the general name for this is or the best practice - especially for touch devices/iOS.
Any guidance or resources would be awesome. Thank you!
8 Replies
I don’t think Scroll Snap is what I’m looking for, which makes me think I haven’t explained it clearly. Scroll Snap just sets where a single scroll container should “snap” after a scroll or action, right? While what I’m after is different: I want normal page scrolling until the user reaches a box with fixed height and scrollable content inside of it. When the user sees that box, the page scroll should get “trapped” inside the box (instead of continuing down or up the page) and only “escape” back to normal page scrolling once the user reaches the top or bottom of the fixed height box.
This sounds like a
position: sticky thing to me.
This is a very told demo I made with it, but I think the behavior when the text "I like it so much, that I make videos about it on YouTube." is on the left is what you're after (where the other side keeps scrolling)
https://codepen.io/kevinpowell/pen/PgNNxr/ea6225d2f80cb70b822c587241aa85be
This was just a draft too, so I have no idea what the quality of the code is 😄Thanks for sharing the CodePen, I think this may solve it. I'll tinker with the code and see if I can implement it into my use case.
maybe
overscroll-behavior property can help youUpdate on progress:
I was unable to achieve the desired effect neither with position sticky nor the overscroll-behavior
I wouldn't be surprised if this can be achieved with CSS but I have only managed to get somewhere using custom JS
Here's working code pen, if anyone can advise on a more straight forward approach that would be high appreciated
https://codepen.io/IgorVerve/pen/XJmyoPJ
Igor
CodePen
Drip Drop Animation (No JS)
Water dripping and dropping. Using bezier curve to get the correct speed...
https://codepen.io/chooking/pen/XJmyLEP
This is a pure CSS approach using animation-timeline, which might not work in older browsers. I was also a bit lazy, so I used magic numbers.
ChooKing
CodePen
Drip Drop Animation (No JS)
Water dripping and dropping. Using bezier curve to get the correct speed...
well done 😄