How to Disable Scrolling When Menu is Active

[Nafiz-Ahmed]

Hello!

I'm working with Locomotive Scroll beta for my project of next js, and I need to disable the page scroll when the navigation menu is on. However, I have faced limitations while implementing these. I have tried different ways of going about this, such as manipulating the overflow of the body or trying to manage the scroll behaviors of Locomotive Scroll. However, none of them have helped me out.

The main issue is, when the menu is opened, I would like to have native scrolling and the custom scroll behavior of Locomotive Scroll disabled; when the menu is closed, I would like scrolling to be enabled again and Locomotive Scroll to start its smooth scrolling.

I've tried using stop() and start() methods on Locomotive Scroll to control this, but I still can't get the behavior I want.

Is there something I missed? Which method should I be using or configuring in order to control the scrolling better with Locomotive Scroll when the menu is open?

I appreciate any suggestions!

[HardyMaxime]

Hi,

Your question is a bit old and you’ve probably already found a solution, but I’m leaving an answer in case it helps someone else.

To restore native scrolling inside a menu or a modal, you can simply add the HTML attribute data-lenis-prevent to the element.

However, if the menu is dynamically injected into the DOM, this method won’t work. In that case, the documentation suggests another solution: Limitations – Third-party injected popups

Hope this helps someone.