If you’ve ever embedded an iframe into your Webflow page, whether it’s a video, widget, or external booking engine, you may have noticed some strange behavior:
- Page scrolling jumps when the iframe loads
- iframe causes layout to shift on mobile devices
- Scrolling animations move or get blocked near the iframe
These scrolling and loading conflicts with embedded iframes can hurt the user experience and page speed, especially on single-page designs with smooth scrolling or parallax effects.
In this post, I will show you how I solved these problems on Webflow, using a few simple techniques that work with most embedding scenarios.
The problem with iframes and scrolling
Iframes act like mini web pages inside your page.
- Dynamically resize (especially forms, booking systems, or maps)
- Inject scripts that block smooth scrolling
- Initiate layout scrolling if not sized properly
This often causes:
- Jumping scroll position when iframe content loads
- Issues with CLS (cumulative layout scrolling)
- Stuck scroll-based animations
Solution 1: Set a fixed width and height for the iframe
Don’t rely on automatic sizing or percentage height.
Set a fixed width and height for your iframe based on the expected content.
<iframe src="https://external-site.com" width="100%" height="600" style="border:none;"></iframe>
- This prevents the layout from shifting when the iframe loads
- Prevents iframes from collapsing on mobile devices
Solution 2:Use a wrapper Div with hidden overflow
Wrap your iframe inside a div block and apply these styles:
- Position: relative
- Overflow: hidden
- Fixed height
.iframe-wrapper {
position: relative;
overflow: hidden;
height: 600px;
}
Place the iframe inside this wrapper.
- This contains unexpected excess or scroll bars
- Prevents the iframe from affecting other page elements
Solution 3:Lazy loading the iframe
If the iframe is far down the page, lazily load it using JavaScript or the native loading="lazy" attribute.
<iframe src="https://external-site.com" width="100%" height="600" loading="lazy" style="border:none;"></iframe>
- This prevents the iframe from blocking the initial page load
- Helps reduce layout scrolling when rendering the page
Solution 4:Disable cursor events on scroll
Some embedded iframes (such as Google Maps) can catch scrolling and block page scrolling when the user reaches them.
iframe {
pointer-events: none;
}
Enable pointer events again on click if necessary (using JavaScript).
- Prevents scroll hijacking on mobile devices
- Common fix for embedded maps
Solution 5:Delay iframe loading with JavaScript
If your iframe is causing severe script conflicts, load it only when needed (e.g. when it enters the viewport).
Simple example with Intersection Observer:
document.addEventListener("DOMContentLoaded", function() {
let iframe = document.querySelector('#lazy-iframe');
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting){
iframe.src = iframe.dataset.src;
observer.unobserve(iframe);
}
});
});
observer.observe(iframe);
});
<iframe id="lazy-iframe" data-src="https://external-site.com" width="100%" height="600" style="border:none;"></iframe>
- Only loads when the user scrolls to it
- Reduces script conflicts and scrolling errors
Iframes are useful but can easily disrupt the flow of your Webflow site if not handled carefully.
My recommended checklist:
- Always set a fixed height and width
- Wrap in a div with controlled styles
- Use lazy loading
- Watch for pointer events
- Delay loading if necessary
.svg)
