All geek questions in one place

IOS mobile: scroll in iFrame inside scrollable parent

I am experiencing a problem in iOS mobile safari where scrolling in a div that contains an iFrame is not possible when dragging and dropping 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>
Run code

So, when dragging and dropping into an iFrame, since it has no scroll, it should scroll the parent element, but instead the whole page scrolls.

Any known workarounds for this error? It already runs on Android.

+4
source share
1 answer

Put <iframe>in a wrapper 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>
Run code

: position:relative on <body> IoS . , "" , .
, position <body> <html>. .

+2

Source: https://habr.com/ru/post/1678743/

More articles:


All Articles