移动端H5嵌入iframe滚动问题

最新推荐文章于 2024-09-02 16:43:18 发布

Joyce的前端日常

最新推荐文章于 2024-09-02 16:43:18 发布

阅读量9.3k

点赞数

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

本文链接：https://blog.csdn.net/joyce_lcy/article/details/80422931

版权

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

摘要由CSDN通过智能技术生成

背景

(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{