How can I fix the issue with two scrollbars and scrolling on the page beneath instead of the overlay in Webflow, when using the "projects overlay" feature on my portfolio website? Also, how can I resolve the problem of the horizontal scroll getting stuck on the live page? Is there a solution to the lagging vertical scroll in the preview mode, possibly related to the issue with the horizontal scroll?
TL;DR
- Set
overflow: hiddenon the<body>when the overlay is active and reset it after closing to prevent background scrolling. - Ensure the overlay uses
position: fixed, covers the full viewport, and has highz-indexto block interactions. - Inspect and fix oversized elements causing horizontal scroll or apply
body { overflow-x: hidden; }. - Optimize animations and large assets to reduce laggy scrolling in preview mode.
You're experiencing multiple scrolling issues in Webflow: overlapping scrollbars due to an overlay, horizontal scroll getting stuck, and laggy vertical scroll in preview. These are often caused by layout overflow problems, improper scroll-lock handling, or oversized elements.
1. Eliminate Multiple Scrollbars When Overlay is Open
- Set
overflow: hiddenon<body>or<html>when the overlay opens to prevent background scrolling. - In your overlay interaction, add a Page Action → Set Body Overflow to Hidden when the overlay opens, and then reset to Auto or Visible when it closes.
- In the Webflow Designer:
- Select Page Trigger → Open Overlay.
- Add an "Add Custom Code" Embed or Use a Page Load/Page Trigger to include this styling dynamically if needed.
2. Prevent Background Page Scrolling
- Even if overflow is hidden, sometimes Webflow allows the underlying page scroll when fixed elements are used.
- Set the overlay to
position: fixed, full-screen sized (top: 0, left: 0, width: 100vw, height: 100vh) and a highz-indexso it captures all scroll events. - Confirm that no element behind the overlay is getting pointer events. You can avoid this by setting the background container to
pointer-events: noneor disabling interactivity accordingly.
3. Fix Horizontal Scroll Getting Stuck
- Horizontal scroll usually occurs when elements exceed the viewport width.
- In Webflow:
- Check for divs or sections with
width: 100vwbut also padding or margins, which can cause overflow. - Inspect any elements set to absolute or fixed position, as they can accidentally extend beyond the viewport.
- Enable X-axis overflow detection:
- Temporarily publish your site and press
F12 → Elements → Body, toggle different layouts to find elements wider than the viewport. - Alternatively, add a Webflow-specific style in the Page Settings → Custom Code → Inside
<style>:body { overflow-x: hidden; }
4. Reduce Laggy Vertical Scrolling in Preview
- Lag in Webflow Preview Mode is usually related to:
- Heavy animation sequences on scroll or load.
- Oversized or unoptimized media (large images or background videos).
- Custom code interfering with scroll behavior.
- To improve:
- Disable smooth scroll or parallax effects if they’re not essential.
- Compress large assets and re-upload.
- For overlays, use
display: flex/grid, not animations moving large panels, as transform-heavy setups can cause jank. - Always test animations inside published view, since Designer Preview isn’t optimized for performance.
Summary
To fix your overlay and scroll issues in Webflow:
- Set
body { overflow: hidden; }when overlay is active to stop background scroll. - Use
position: fixedand full viewport styling for overlays. - Check for wide elements causing horizontal scroll, and correct their dimensions or set
overflow-x: hidden. - Optimize heavy animations and media to reduce preview scroll lag.
These adjustments will improve scroll performance and interface behavior across both Designer and the published site.