Menu
I'm experiencing an issue in mobile iOS safari where scrolling in a div that contains an iFrame is impossible when dragging inside the iFrame itself:
#outside{
height: 400px;
width: 200px;
background: blue;
overflow: scroll;
}
.space{
height: 200px;
width: 200px;
background: red;
}
iframe{
height: 1000px;
width: 200px;
background-color: green;
}The green section is the iFrame.... Scrolling on the green section in iOS mobile is the issue
<div id="outside">
<div class="space"></div>
<iframe>
</iframe>
<div class="space"></div>
</div>So, when dragging on the iFrame, since it has no scroll, it should scroll the parent, but instead, the whole page is scrolled.
Any known workarounds for this bug? It is already working on Android.
632
1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars. 2) Set the width attribute of the iframe to 200% (width="200%"). This will enable only the horizontal scroll bar.
TO get the scroll position use the attributes scrollX and scrollY that exists in the window object. Returns null or undefined for cross domain iframes.
The <iframe> scrolling attribute is not supported in HTML5. Use CSS instead. The scrolling attribute specifies whether or not to display scrollbars in an <iframe>. Normally, scrollbars appear in an <iframe> when the content is larger than the <iframe>.
Place your <iframe>s in wrappers with -webkit-overflow-scrolling: touch;
.iContainer {
-webkit-overflow-scrolling: touch;
}
#outside {
height: 400px;
width: 200px;
background: blue;
overflow: scroll;
}
.space {
height: 200px;
width: 200px;
background: red;
}
iframe {
height: 1000px;
width: 200px;
background-color: green;
border: none;
display:block;
}
iContainer {
-webkit-overflow-scrolling: touch;
}The green section is the iFrame.... Scrolling on the green section in iOS mobile is the issue
<div id="outside">
<div class="space"></div>
<div class="iContainer">
<iframe>
</iframe>
</div>
<div class="space"></div>
</div>Special note: Using this in conjunction with position:relative on <body> causes IoS devices to sometimes block the scroll. Letting it fully revert from it's "bounce" fixes it, but it still feels wrong and buggy.
So make sure you don't have any set position on your <body> or <html>. Took me a bit to debug this quite recently.
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
