How can I disable vertical scrolling on desktop and mobile browsers using Webflow?
TL;DR
- In Webflow Designer, set the
Body (All Pages)element's Overflow toHidden. - Add custom CSS in Project Settings > Custom Code (Head Code):
```html``` - Save, publish, and test on both desktop and mobile to ensure vertical scrolling is disabled.
To disable vertical scrolling in Webflow, you need to apply CSS properties to the body or html element. Here's how to do it:
1. Use Overflow Hidden in Webflow Designer
- Go to the Webflow Designer and select the
Body (All Pages)element. - Click on the Style panel (right sidebar).
- Under the Layout section, set Overflow to
Hidden.
2. Add Custom Code for Mobile Browsers
Some mobile browsers may not fully respect the Webflow overflow: hidden setting. To ensure complete blocking:
- Go to Project Settings > Custom Code.
- In the Head Code section, add:
```html``` - Click Save and Publish your site.
3. Test Across Devices
- Open your site on desktop and mobile browsers.
- Try scrolling vertically to confirm that movement is blocked.
Summary
Setting overflow: hidden on the body element in Webflow, plus reinforcing it with custom CSS in the Head Code, will effectively disable vertical scrolling across desktop and mobile browsers. Always test the changes to ensure they work correctly on all devices.