移动端H5嵌入iframe滚动问题

最新推荐文章于 2024-05-13 13:33:11 发布

Joyce的前端日常

最新推荐文章于 2024-05-13 13:33:11 发布

阅读量9.2k

点赞数

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

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

版权

背景(1) 实现功能如图，悬浮窗中为iframe，如果超出容器大小实现滚动。(2) 问题在iOS上，悬浮窗中的内容如果不是iFrame是可以滚动的，但换成iframe后就无法在其中滚动。解决方案(1) 思路问题在于overflow: auto或者overflow: scroll没有生效。需要在容器上加上：height: 57vh;overf...

摘要由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; /*看这里*/
      }

最低0.47元/天解锁文章

Joyce的前端日常

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
移动端H5嵌入iframe滚动问题

背景(1) 实现功能如图，悬浮窗中为iframe，如果超出容器大小实现滚动。(2) 问题在iOS上，悬浮窗中的内容如果不是iFrame是可以滚动的，但换成iframe后就无法在其中滚动。解决方案(1) 思路问题在于overflow: auto或者overflow: scroll没有生效。需要在容器上加上：height: 57vh;overf...
复制链接

扫一扫