A simple, clean, and straightforward bit of javascript to help you disable and enable scroll within Webflow.
(
4
min read)
By default Webflow doesn't have a feature to disable scrolling. The disabling and re-enabling of user's ability to scroll is critical for a seamless user experience in a great deal of cases. So if you're tired of users scrolling through your website's content when they should be focusing on a pop-up or menu, then you're in luck.
In this tutorial, we will show you how to disable and reenable scroll on click whilst still using your favourite website building suite, Webflow.
This feature can be especially useful for creating pop-ups, menus, or other elements that require users to focus on the content without being distracted by scrolling. By disabling the scroll, you can create a more expected experience for your users.
To implement this feature, you will need to copy and paste the code example we provide into the before </body> code window of your Webflow project. Then, you can simply add custom attributes to your trigger elements to enable or disable scrolling on click.
For example, you might want to use the "scroll=disable" attribute for a pop-up or modal that you want users to focus on without any scrolling distractions. You might use the "scroll=enable" attribute for a button that closes said modal or pop-up.
Additionally, you can use the "scroll=disable-enable" attribute for elements like mobile menus that allow users to toggle the scroll on and off. This can create a more seamless experience for users who are navigating your site on a mobile device.
Overall, disabling and reenabling scroll on click can be a powerful tool for enhancing the user experience on your Webflow site. So, let's dive in and learn how to implement this feature.
and paste it in the before </body> code window of your page/project, and hit save.
You can use it ether way or all ways. Go crazy.
After copying the custom code and pasting it in the before </body> code box of your page/project and hitting save, you simply need to place the following custom attributes to your trigger elements (such as actual buttons, divs and links etc)
You can do this by selecting the element of which you want to disable/enable scrolling, such as a button, and clicking element settings icon ⚙️ (top right) or by simply pressing 'D' on your keyboard.
scroll = disable
for any element of which you want scroll to be disabled upon click.
scroll = enable
for any element of which you want scroll to be enabled upon click.
scroll = disable-enable
for elements of which you would like to be able to cycle the scroll from being enabled to disabled, such as a mobile menu or full screen menu button.
Remember, javascript won't load when inside of Webflow — even in preview mode. You'll need to publish the site first, and then view your published site via its URL as you would a finished product to test.
I see so many beginners and even professionally built Webflow sites that are missing this crucial little step. If you've found it useful make sure you link people to this.
