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?

You’re likely facing two related issues: unexpected double scrollbars and overlay scrolling behavior, and horizontal scroll glitches. These are typically caused by layout overflows or incorrect body locking when overlays are opened via interactions.

​

1. Fix Double Scrollbars and Background Scrolling Behind Overlay

​

When a modal (like your "projects overlay") opens, there can be scroll conflicts between the overlay and the page body.

​

• Use overflow: hidden on the Body when the overlay is active. This prevents the background page from scrolling.
• In your interaction that opens the overlay, add a step: Set Body (All Pages) → Style → Overflow: Hidden.
• Add another step in the close overlay interaction: Set Body (All Pages) → Style → Overflow: Auto (or "Visible" if you prefer).

​

• Ensure the overlay spans the full viewport so it captures all scroll events:
• Set the overlay container to Position: Fixed, with Top/Left/Right/Bottom = 0.
• Set Overflow: Auto or Scroll if you want scrolling inside the overlay content, otherwise leave it as Hidden.

​

• Avoid placing the overlay element inside scrollable divs or sections under sticky/overflow contexts. Place it directly under the Body.

​

2. Fix Horizontal Scroll Getting Stuck on Live Page

​

Horizontal scroll issues often result from elements overflowing the viewport, possibly:

​

• Hidden elements extending off-screen (e.g., large 100vw sections inside nested divs).
• Negative margins or extra paddings.

​

Steps to fix:

​

• Enable Webflow’s built-in Overflow X check:
• In the Designer, go to the Body (All Pages).
• Set Overflow X: Hidden to immediately eliminate horizontal scrollbars.

​

• Inspect all top-level sections and wrappers:
• Look for children exceeding 100vw or using fixed widths inside flexible containers.
• Replace fixed widths with max-width: 100% or utilize flex/grid layouts to auto-wrap content.

​

• Use Webflow’s Preview mode + browser DevTools (or Ctrl + Shift + C) to detect which elements cause overflow.

​

3. Fix Lagging Vertical Scroll in Preview Mode

​

Laggy scroll is sometimes linked to:

​

• Too many scroll-based animations triggering simultaneously.
• Unoptimized images or videos loading during scroll.
• Stacked transform elements with effects (blur, scale, etc.) can degrade performance.

​

Steps to resolve:

​

• Minimize the number of scroll-triggered animations, especially if they use heavy transforms (like scale, blur, or opacity transitions on large containers).
• Use lazy loading (loading="lazy") on big images.
• Break content into multiple smaller sections to reduce layout complexity.
• Test on published site rather than just preview — preview may lag more due to rendering inside Webflow’s editing shell.

​

Summary

​

To fix the double scrollbars and background scrolling issue, make sure your overlay uses position: fixed, stretches full screen, and applies overflow: hidden on the Body when active. For stuck horizontal scroll, add overflow-x: hidden to the Body and check for oversized children elements. For vertical scroll lag, simplify animations and heavy transforms, and use lazy loading for large content.