Webflow sync, pageviews & more.
NEW

What could be causing the scroll issue on my published Webflow website?

TL;DR
  • Check overflow settings on body, sections, and divs to ensure no improper overflow: hidden.
  • Inspect interactions, animations, sticky/fixed elements, and custom code for scroll-blocking behaviors.
  • Verify enough scrollable content exists, and eliminate layout issues like negative margins or transforms.
  • Use appropriate viewport units for mobile, then republish your site and test in an incognito window.

A scrolling issue on your published Webflow site—such as the page being stuck, jerky, or over-scrolling—typically stems from improper layout settings, hidden elements, or custom code conflicts.

1. Check for Overflow Settings

  • Go to each key element (especially Body, Section, and Div).
  • Check Style Panel → Overflow; if any element has overflow: hidden or auto, try setting it to visible.
  • An element with overflow: hidden may block scroll if child elements extend beyond its bounds.

2. Inspect Interactions and Animations

  • Open the Interactions panel to see if any animations are locking scroll (e.g., a page load animation that never finishes).
  • Look for actions like “Disable Scroll” or overflow: hidden being applied to the body or html during interactions.

3. Check for Sticky/Fixed Elements

  • Elements with position: fixed or sticky can cause layout issues if not sized or placed correctly.
  • Try temporarily removing them to see if the scroll behavior improves.

4. Review Custom Code

  • Go to Project Settings → Custom Code and inspect the <head> and <body> code areas.
  • Scripts that manipulate scroll behavior (e.g., smooth scrolling libraries, scroll jacking) may interfere with native scrolling.
  • Disable or remove custom JavaScript and republish to test.

5. Make Sure There's Enough Scrollable Content

  • A short page with no tall sections won’t scroll. Confirm page height exceeds viewport.
  • Use the Navigator to ensure there's no accidental hidden content reducing page height.

6. Check for Negative Margins or Transforms

  • Manually set negative margins or large translateY() values on elements could push content out of the viewport.
  • Inspect suspect elements using Webflow Preview Mode or browser Developer Tools to verify layout placement.

7. Mobile Viewport & Viewport Units

  • On smaller devices, using vh without considering mobile browser UI (like the address bar) can cause jumpy scroll.
  • Use 100dvh (if supported) instead of 100vh to fix mobile scroll issues caused by dynamic browser chrome.

8. Re-Publish & Clear Cache

  • After making adjustments, republish the site from the Webflow Designer.
  • Also try viewing it in an incognito/private browser window to eliminate caching effects.

Summary

To resolve a scroll issue in Webflow, check overflow settings, interactions, custom code, and for any layout problems like fixed elements or negative margins. Use Designer previews along with browser DevTools to isolate the cause, then republish.

Rate this answer

Other Webflow Questions