How can I disable vertical scrolling on desktop and mobile browsers using Webflow?

To disable vertical scrolling on both desktop and mobile in Webflow, you need to hide the overflow of the page’s main wrappers. Here's how to do that:

1. Set overflow: hidden on the body and html Elements

• In Webflow’s Designer, select the Body element from the Navigator.
• Go to the Style panel (right-hand side) and set:
• Overflow: Hidden (this applies to both directions).
• Repeat this for the top-level element (usually the html equivalent, which is not selectable in Designer). To target both html and body, you'll need to use custom code (see next step).

2. Add Custom Code to Fully Disable Vertical Scroll

• Go to Page Settings or Project Settings > Custom Code.

• In the Before tag section, paste the following inline style:

  ``

• This ensures vertical scrolling is completely prevented across all devices, even if elements exist outside the viewport.

3. Be Aware of Side Effects

• Disabling scroll may prevent users from accessing overflowing content.
• If using scroll-triggered animations (e.g., Lottie, scroll-based interactions), these may break or never activate.
• Test on different screen sizes to ensure important content remains visible.

Summary

To disable vertical scrolling in Webflow, set overflow: hidden on the Body element using the Style panel, then reinforce it by targeting both html and body with a custom CSS rule in the Before tag section. This prevents scrolling on desktop and mobile browsers.