移动端H5嵌入iframe滚动问题

最新推荐文章于 2024-01-30 10:19:08 发布

Joyce的前端日常

最新推荐文章于 2024-01-30 10:19:08 发布

阅读量9.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 CSS 文章标签： iframe滚动

本文链接：https://blog.youkuaiyun.com/joyce_lcy/article/details/80422931

CSS 同时被 2 个专栏收录

19 篇文章

订阅专栏

html5

13 篇文章

订阅专栏

本文介绍了在移动端H5中，当iframe内容超出容器大小时，如何解决在iOS上滚动失效的问题。通过分析问题在于iscroll未生效，提出在容器上使用`-webkit-overflow-scrolling: touch;`属性来修复。

背景

(1) 实现功能

如图，悬浮窗中为iframe，点击展开内容，如果超出容器大小实现滚动。
这里写图片描述

(2) 问题

在iOS上，悬浮窗容器中的内容如果不是一个iframe，则可以滚动。但换成iframe后就无法在其中滚动。

解决方案

(1) 思路

问题在于overflow: auto或者overflow: scroll没有生效。

需要在容器上使用-webkit-overflow-scrolling: touch;来解决这个问题。如下：

height: 57vh;
overflow: auto;
-webkit-overflow-scrolling: touch;

(2) 完整demo

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <style>
      .fix-container{
        position: fixed;
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        background-color: wheat;
        height: 57vh;    /*看这里*/
        overflow: auto;  /*看这里*/
        -webkit-overflow-scrolling: touch; /*看这里*/
      }
      .popup-iframe{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
      <div>
          <div class='fix-container'>
            <!-- <ul>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
              <li>b</li>
            </ul> -->
            <iframe class="popup-iframe" src="http://www.panomatics.com/virtualtours/thepeninsula/hongkong/index.html?startscene=1&if=1" frameborder="0" allowfullscreen=""></iframe></div>
          </div>
          <ul>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
          </ul>
        </div>
  </body>
</html>