Demonstrating scroll event containment with browserScrolling: true
When you scroll inside the Flutter app below (the green-bordered iframe), ONLY the Flutter app scrolls - the parent page stays still. Watch the scroll indicator in the top-right corner - it should NOT change!
GitHub Issue: #156985
Problem: When a Flutter web app is embedded in an iframe with a fixed position,
and contains a ListView inside a SingleChildScrollView,
scroll events bubble up to the parent page, causing both to scroll simultaneously.
Root Cause: Without browserScrolling: true, Flutter intercepts
wheel and touch events. Inside an iframe, these events aren't properly contained,
so they propagate back to the parent document.
Solution: Add browserScrolling: true to the
SingleChildScrollView and wrap nested scrollables with BrowserScrollZone
for boundary detection.
The Flutter app below is embedded in a fixed-position iframe with browserScrolling: true.
Try scrolling inside it - the parent page should NOT scroll!
This is content on the parent page. Notice that when you scroll inside the Flutter app above, this parent page content does NOT scroll!
The scroll indicator in the top-right corner shows the parent page's scroll position.
With browserScrolling: true, it stays at 0px when scrolling inside the Flutter iframe!
This section exists to provide scrollable content on the parent page, making it easier to observe that scroll events are properly contained.
With browserScrolling: true, scrolling inside the Flutter iframe
does NOT affect this parent page - the fix works!
The issue is particularly problematic for:
The fix involves two key changes:
browserScrolling: true to SingleChildScrollViewBrowserScrollZone for boundary detectionThis allows the browser to handle scrolling natively while still supporting Flutter's custom scroll physics and nested scrolling.