Disable page scrolling


I’m hoping there’s a kind soul out there that could help with a navdrop down issue I’m having. I have an issue with a large multi column nav dropdown link I’ve created. It works fine, but when the dropdown link is activated, the site is scrolling if the user uses their mousewheel.
Would anyone know how to disable page scrolling while the dropdown is active?

Thank you so much in advance.

Kindest regards,


Here is my site Read-Only: (https://preview.webflow.com/preview/plantquest?utm_medium=preview_link&utm_source=designer&utm_content=plantquest&preview=783ce56a26e80758db11027f8d756f01&workflow=preview)
(how to share your site Read-Only link)

Scrolling of the webpage can also be disabled by using only the CSS using the overflow property. In this method, we set the height of the element for which the scroll is disabled to 100% such that it covers all the space of its parent container, and then we set the overflow property to hidden.

Hi Gavin,

I really appreciate you engaging with me to solve this issue, thank you.

I’ve tried setting the elements of the dropdown list to 100% height and set the overflow to hidden, but the page still scrolls beneath the open dropdown list. Am I adding it to the wrong place?

On the (very messy atm) homepage you’ll see those three links that open different dropdowns, obviously it’s these three dropdowns I’m trying to disable scrolling for. And thank you!