解决iframe在ios中无法滚动的bug

最新推荐文章于 2022-06-23 10:12:00 发布

十步杀一人_千里不留行

最新推荐文章于 2022-06-23 10:12:00 发布

阅读量5.3k

点赞数

分类专栏：前端相关文章标签： iphone iframe

本文链接：https://blog.csdn.net/m0_37609579/article/details/85333081

版权

前端相关专栏收录该内容

18 篇文章 0 订阅

订阅专栏

https://fly.layui.com/jie/32020/(无效)

修改方法：
1、在嵌入进iframe的每个页面的<body>里面加个id，如<body id="iosiframe">
2、引入jquery，并新增js代码：

    var ua = navigator.userAgent.toLowerCase();
    var screenwidth = window.screen.width;
    if(!/iphone|ipad|ipod/.test(ua)){
        $("#iosiframe").attr("scrolling","auto");
    }else{
        $('#iosiframe').width(screenwidth + 'px');
    }

备注：也可以直接在layui.js里面加上以上代码，以后只需要在<body>指定id就行了。

前端框架layer ios不支持弹出页面滚动条(无效)

https://blog.csdn.net/ding_dq/article/details/61921428

问题：最近用前端框架layer做项目，弹出层（iframe）在web端和安卓上都有滚动条，可到了ios上就不支持上下滚动。

解决方法：

.scroll-wrapper {

-webkit-overflow-scrolling: touch;

overflow-y: scroll;

}

layer.open({

type: 2,title :false,shadeClose:true,closeBtn: 0,

area: [width+'px', height+'px'],

offset: '100px',

content: '',

success: function(layero){

$(layero).addClass("scroll-wrapper");//苹果 iframe 滚动条失效解决方式

}

});

解决iframe在ios中无法滚动的bug(有效)

https://blog.csdn.net/around_primary/article/details/80689098

具体解决方案:

在index.html页面的<iframe>标签中按教程进行设置

定义一个div,设置class:scroll-wrapper

<div class="layui-tab-content scroll-wrapper" style="min-height: 250px; padding: 5px 0 0 0;">
    <div class="layui-tab-item layui-show ">
        <iframe src="pages/dashboard.html"></iframe>
    </div>
</div>

给scroll-wrapper指定样式,问题解决

<style>
          .scroll-wrapper{
              -webkit-overflow-scrolling: touch;
              overflow: scroll;}
          iframe{
              width: 100%;
              height: 100%;
          }
</style>