{"id":5477,"date":"2021-09-17T02:00:00","date_gmt":"2021-09-17T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/prevent-scroll-on-scrollable-element-js\/"},"modified":"2024-02-05T20:06:56","modified_gmt":"2024-02-05T19:06:56","slug":"prevent-scroll-on-scrollable-element-js","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/prevent-scroll-on-scrollable-element-js\/","title":{"rendered":"Prevent Scroll On Scrollable Elements [JS & CSS]"},"content":{"rendered":"

If you ever need to temporally disable scrolling<\/strong> on a specific scrollable element, then you will need to use JavaScript or CSS for it. Depending on your use case, you can choose between JavaScript and CSS solutions. Although in general terms the CSS solution is the most adopted one, JavaScript offers you a bit more of control and flexibility and allows you to decide how exactly you want to stop the scrolling<\/strong>.<\/p>\n

1. Cancelling scroll using JavaScript<\/h2>\n

One of the options is to listen to the wheel<\/code> event on the element you want to prevent the scrolling and then prevent the default behavior as well as stopping the propagation and returning a false<\/code> value.<\/p>\n

Something as simple as this, where #scrollable<\/code> would be the ID of our scrollable element.<\/p>\n

document<\/span>.querySelector('#scrollable'<\/span>).addEventListener('wheel'<\/span>, preventScroll, {passive<\/span>: false<\/span>});\n\nfunction<\/span> preventScroll<\/span>(e<\/span>)<\/span>{\n    e.preventDefault();\n    e.stopPropagation();\n\n    return<\/span> false<\/span>;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Notice as well that we are using the option {passive: false}<\/code> on the event listener. This is actually because we have to tell browsers that, eventually, we might call preventDefault<\/code> and cancel the default behavior. This way the browser is aware of it and can decide how to treat the event. You can read more about it on the docs<\/a>.<\/p>\n
\n
If you need to provide support for IE 11 you might need to add a fallback for the passive event param as it is not supported check if the passive event is supported.<\/p>\n<\/blockquote>\n
Now, what if we want to enable or disable this dynamically? Here’s an example with a couple of buttons, one to disable the scroll and another one to enable it:<\/p>\n\n