ScrollTrigger.normalizeScroll({allowNestedScroll: true}) with scrollable div

[trusty97]

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?

[GreenSock]

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? 

[trusty97]

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

[Chipsa]

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

[GreenSock]

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);
	}
});

 

[Chipsa]

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🙂