If your Webflow site isn’t scrolling on mobile, the issue is likely due to an element with fixed positioning, overflow settings, or interactions preventing scrolling. Follow these steps to troubleshoot and fix the problem.
1. Check for Fixed Positioning
- Go to Webflow Designer and inspect sections, containers, or divs.
- If an element is set to position: fixed and takes up the full viewport (
100vh
height), it can block scrolling. - Solution: Change the position to relative or adjust the height.
2. Review Overflow Settings
- Select the Body (or problematic div) and check its overflow property.
- If set to “hidden”, it may be preventing scrolling.
- Solution: Set overflow to visible or auto under the Style panel.
3. Check for Page Interactions
- Go to the Interactions Panel and verify if any page load or scroll animations are affecting body overflow.
- Some interactions (e.g.,
overflow: hidden
on page load) may be disabling scrolling. - Solution: Adjust or remove any interactions that modify overflow settings.
4. Verify Mobile-Specific Styles
- Webflow lets you set different styles for each device breakpoint. Make sure you’re checking the mobile and tablet views.
- Solution: Inspect and reset styles on mobile if needed.
5. Look for Custom Code
- Go to Project Settings > Custom Code and check any CSS or JavaScript that might affect scrolling.
- Some scripts (e.g.,
document.body.style.overflow = "hidden";
) might be disabling scroll. - Solution: Temporarily remove custom code and test.
6. Test in an Incognito Window
- Open your site in an incognito/private browser window to rule out cache-related issues.
- If scrolling works there, clear your cache and restart the browser.
Summary
To fix scrolling issues on mobile, check for fixed positioning, overflow settings, page interactions, and custom code blocking scroll. Adjust any problematic settings and test across different devices. If the issue persists, publish your site and try opening it in incognito mode.