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!
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!
