Webflow sync, pageviews & more.
NEW

How can I fix the issue of my Webflow site not scrolling on mobile?

TL;DR
  • Check mobile viewport elements for overflow settings and ensure body and wrappers aren't set to overflow: hidden.
  • Inspect fixed or sticky elements for height issues that may block scrolling; avoid improper use of 100vh.
  • Review interactions and ensure scroll-locks (e.g., from modals) are properly reset.
  • Examine custom code for global overflow styles or scripts preventing scroll.
  • Use the Navigator to find hidden overlays with high z-index that might block scroll.

If your Webflow site isn’t scrolling on mobile, it’s usually due to hidden overflow settings, fixed positioning, or incorrectly configured mobile styles.

1. Check Overflow Settings

  • Go to Webflow Designer, switch to the mobile viewports (Tablet, Mobile Landscape, Mobile Portrait).
  • Select the Body element and make sure Overflow is set to Visible or Auto.
  • Also check any Section, Div, or Wrapper elements that might be clipping content. If an element has Overflow: Hidden, it can block scrolling.

2. Inspect Fixed or Sticky Elements

  • Elements with Position: Fixed or Sticky can block scroll if sized improperly.
  • Verify that these elements (e.g., navbars or overlays) don’t cover the entire viewport height (100vh) with no room to scroll.
  • If using 100vh, be aware that mobile browsers sometimes miscalculate the height. Use min-height: 100vh or consider 100% height + padding/margin instead.

3. Check Interactions and Triggers

  • Go to the Interactions panel and see if any Page Load or Page Scroll interactions affect scroll behavior.
  • If a scroll-lock script is triggered (common in modal overlays), make sure it is disabled or properly reset after the modal closes.

4. Review Custom Code

  • Go to Project Settings > Custom Code and review any code in the Header or Footer areas.
  • Look for CSS that might apply overflow: hidden to the body or html element globally. This will prevent scrolling.
  • Temporarily remove or comment out custom scripts and retest the mobile scroll behavior.

5. Recheck z-index and Layering

  • Sometimes layers with higher z-index but no visible content (like modals or overlays that are unintentionally active) can block scroll.
  • Use the Navigator panel to check visibility and z-index stacking order of those layers.

Summary

To fix mobile scroll issues in Webflow, inspect overflow settings, positioning, and custom code that might affect body/html scroll behavior. Also confirm that interactions and overlays don’t lock scrolling unintentionally.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why does the whole page styling on my Webflow site change when I publish it, including the Navbar, after adding the uploadcare widget to a form?
What is the recommended way to use data from an external CMS with Webflow?
Is there a simple JS code that can be embedded in Webflow's Custom Code to redirect visitors to a specific page based on their browser language?
Can the PDF file link displayed in the browser be modified to remove the Webflow reference?
How can I add a search icon inside a text field and make it the submit button in Webflow?
Can I create a similar text animation in Webflow using web-based tools and integrate it with scrolling functionality?
Which CMS is the easiest to use and best to integrate with Webflow, allowing clients to easily make changes to text, images, and add blog posts without any loss in HTML/CSS/JS after exporting the design from Webflow?
How can I fix the issue with Google Console flagging alerts for videos on a Webflow page that do not have a thumbnail URL provided?
How can I achieve a dynamic redirect for a Webflow form depending on the customer's selection of plan and ad spend, when using an external subscription service for payment?
What are you currently using for video hosting and what features would you like to see in a Webflow video hosting solution like Vidzflow?
How can I create a GA4 Event to track form conversions using Webflow, Google Tag Manager, and Google Analytics 4?
How can I purchase an account plan and site plan on Webflow without using a credit card or PayPal? I am based in Vienna, Austria and would like to use my bank account or PayPal as a payment option.
What could be causing the big white border when setting the overflow setting of divs to scroll in Webflow?
Can I add my iTunes podcasts to Webflow?
How can I move the slider arrows in Webflow to a different position like in the attached picture?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?