Iframe scrolling iOS 8

2019-01-05 01:17发布

站内问答 / 移动开发
458 10 5

I have an iframe and i need it to have a scrolling overflow. it seems work out in desktop, i used a work around to make it work in iOS. it works on android and iOS now. however, iOS8 it fails.

    <html>
    <body>
    <style type="text/css">
      .scroll-container {
       overflow: scroll;
       -webkit-overflow-scrolling: touch;
      }
     #iframe_survey {
      height: 100%;
     }

    .scroll-container {
     height: 100%;
     width: 100%;
     overflow: scroll;
     }
   </style>

   <div class="scroll-container scroll-ios">
   <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
   </div>
   </body>

10条回答
戒情不戒烟
2楼-- · 2019-01-05 01:21

The must is define your scroll-container to fixed for the div is a fullscreen size. Then inside the iframe create a main content who have a properties scrolling.

Inside you iframe, in the mainContainer-scroll, you can add:

  • -webkit-overflow-scrolling: touch //For active smooth scroll
  • -webkit-transform: translate3d(0, 0, 0) //For material acceleration
  • overflow-y:scroll; //For add scrolling in y axis
  • position:absolute;height:100%;width:100%;top:0;left:0; //For fix the container

Main page

<html>
    <head>
        <style type="text/css">
            #iframe_survey {
                height: 100%;
            }

            .scroll-container {
                height: 100%;
                width: 100%;
                position:fixed;
            }
        </style>
    </head>
    <body>
        <div class="scroll-container scroll-ios">
            <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
        </div>
    </body>
</html>

Inside Iframe

<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
    <div class="Content" style="height:2000px;width:100%;background:blue;">
    </div>
</div>
查看更多
0人赞 添加讨论(0) 举报
Bombasti
3楼-- · 2019-01-05 01:23

Not knowing what is on the other end of "www.iframe.com"...but for me, in that file's css I added:

body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

That fixed it.

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
4楼-- · 2019-01-05 01:26

Use the code in this way

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>
查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
5楼-- · 2019-01-05 01:27

it did not work for me! but I could figure out a little trick after reading this post: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

Just put an !important after that and works just fine!

-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
6楼-- · 2019-01-05 01:30

I was able to make an iframe scroll in iOS by placing an iframe inside a div (which acts as container) and apply the styles as follows and this works perfectly.

.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}

As i am working in GWT, for GWT people here is the suggestion. In case of GWT just place an iframe in ScrollPanel (div) and apply the styles as above.

查看更多
0人赞 添加讨论(0) 举报
beautiful°
7楼-- · 2019-01-05 01:33

In order to make an iframe scrollable on iOS, you have to add the CSS3 property -webkit-overflow-scrolling: touch to the parent container:

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)