Freezing/Locking Scroll

[samwatts1988]

Hi there! 

 

I'm currently working on a project which is using ScrollSmoother and ScrollTrigger, which involves the use of modals popping up over the top of the content. I just wondered what the most effective method of freezing/locking the scroll position is when a modal is opened over the top of the content? 

 

I've looked at .kill() and .paused() and these prevent the sequence from running but don't appear to "lock" the scroll. Similarly, I've looked at attaching a CSS class which puts overflow: hidden; on the HTML and body elements, however this doesn't succeed either (presumably because GSAP is still running transform: matrix3d(); on the scrollable element. 

 

Entirely possible I've misinterpreted something in the docs so apologies in advance if there's an obvious candidate I've overlooked, but any help/pointers here would be hugely appreciated. 

 

Many thanks!

 

Sam

[GreenSock]

13 hours ago, samwatts1988 said:

I've looked at .kill() and .paused() and these prevent the sequence from running but don't appear to "lock" the scroll.

Wait, are you saying that you tried calling smoother.paused(true) and it didn't prevent the scroll? It certainly should. If not, please provide a minimal demo and we'll take a peek. 

https://greensock.com/docs/v3/Plugins/ScrollSmoother/paused()

[samwatts1988]

Ah! Got it. I was trying to set .paused() on the timeline instead of the smoother. Thanks so much for the pointer! 

[GreenSock]

No problem at all! Glad it worked out. 

 

Enjoy!