trusty97 Posted June 22, 2022 Share Posted June 22, 2022 I'm having an issue using ScrollTrigger.normalizeScroll() with a scrollable div. I enabled allowNestedScroll: true but it seems as though the page scrolls a bit whille scrolling the nested area. A simple example is available here: https://codesandbox.io/s/blissful-jones-6tz35t?file=/src/App.js You can see when ScrollTrigger.normalizeScroll() is enabled, it will scroll slightly along with the nested scroll area. I'm seeing this in Chrome 103. Am I handling this incorrectly or is there another way to get only the nested area to scroll? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 23, 2022 Solution Share Posted June 23, 2022 You can capture the events on the scrollable containers and stopImmediatePropagation(), like: let stopPropagation = e => e.stopImmediatePropagation(); document.querySelectorAll("div").forEach(el => { if (el.scrollHeight > el.clientHeight) { el.addEventListener("wheel", stopPropagation); el.addEventListener("touchstart", stopPropagation); } }); Does that help? Link to comment Share on other sites More sharing options...
trusty97 Posted June 23, 2022 Author Share Posted June 23, 2022 That worked! For anyone looking for example code with the solution in place, see this codesandbox: https://codesandbox.io/s/dreamy-rain-lv0td2?file=/src/App.js 1 Link to comment Share on other sites More sharing options...
Chipsa Posted October 28, 2022 Share Posted October 28, 2022 (edited) On 6/23/2022 at 2:06 PM, GreenSock said: You can capture the events on the scrollable containers and stopImmediatePropagation(), like: document.querySelectorAll("div").forEach(div => { if (div.scrollHeight > div.clientHeight) { div.addEventListener("wheel", e => e.stopImmediatePropagation()) } }) Does that help? Hello, I'm used it, and it works on desctop, but on mobile, my popups not scrolling, can you give an advice how I can fix it? I'm already have this part of code, but it doesn't help Edit my code, for mobile touchstart event is ok, but I have dynamic content in popup, and didnt update listener, so wheel + touchstart resolve problems ScrollTrigger.normalizeScroll({ allowNestedScroll: true, }); document.querySelectorAll('.lit-popup-container').forEach((div) => { if (div.scrollHeight > div.clientHeight) { div.addEventListener('wheel', (e) => { e.stopImmediatePropagation(); }); div.addEventListener('touchstart', (e) => { e.stopImmediatePropagation(); }); } }); Edited October 28, 2022 by Chipsa found a solution 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 28, 2022 Share Posted October 28, 2022 Thanks for sharing your solution, @Chipsa. Here's a slightly more condensed and memory-efficient version: let stopPropagation = e => e.stopImmediatePropagation(); document.querySelectorAll("div").forEach(el => { if (el.scrollHeight > el.clientHeight) { el.addEventListener("wheel", stopPropagation); el.addEventListener("touchstart", stopPropagation); } }); 2 Link to comment Share on other sites More sharing options...
Chipsa Posted October 31, 2022 Share Posted October 31, 2022 On 10/29/2022 at 12:53 AM, GreenSock said: Thanks for sharing your solution, @Chipsa. Here's a slightly more condensed and memory-efficient version: let stopPropagation = e => e.stopImmediatePropagation(); document.querySelectorAll("div").forEach(el => { if (el.scrollHeight > el.clientHeight) { el.addEventListener("wheel", stopPropagation); el.addEventListener("touchstart", stopPropagation); } }); Thank you so much, memory so important on this project🙂 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now