IOS端拖动的问题

最新推荐文章于 2020-04-27 15:29:49 发布

追风少年z

最新推荐文章于 2020-04-27 15:29:49 发布

阅读量1k

点赞数

文章标签： ios 浏览器手机

本文链接：https://blog.csdn.net/qq_25870705/article/details/72846806

版权

解决bootstrap-table在IOS端不能X轴拖动的问题

在苹果手机上，不管任何浏览器拖动、滑动效果都很差。网上找了，也加了-webkit-overflow-scrolling:touch;overflow:auto;也不行。

<div class="table-responsive">
    <table class="table">
        <thead></thead>
       <tbody>

       </tbody>
    </table>
</div>

如上代码中所示把 table 放在div.table-responsive内就可以了。
可能会出现一个外框不好看，在css里再设置一下就好了。

.table-responsive {
    border: none;
}

当我把以上2种方式试完后发现并没有什么卵用~

下面记录下我的解决方式:

1.思路

将table嵌套在一个div中对div进行滚动处理

2.实现

<div id="tableDiv" style="height:100%;overflow-y:auto;overflow-x:auto;">
    <table id="demo-table" >
    </table>
</div>

//因为div宽度写死的话,移动端使用不同分辨率的机型进行访问会很丑！
//获取当前网页可见区域宽
var offsetWidth = document.body.offsetWidth;
if(offsetWidth<860){
    //为移动端登录
    //别问我为什么-5 随心而动！ 如果不减的话怕出现滚动条
    $("#tableDiv").width(offsetWidth-5); 
}

解决layer.open(iframe)在IOS端没有Y滚动条的问题

不废话，直接上code
js

layer.open({
        type: 2,
        title: title,
        area: ['90%', '80%'],    //宽和高
        anim:1,//出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可
        content: url, //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        success: function(layero) {
            $(layero).addClass("scroll-wrapper"); //苹果 iframe 滚动条失效解决方式 经测试 无效
        }
});

css

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

html

<body class="gray-bg">
    <div class="scroll-wrapper">
</body>

以上就是我解决IOS端拖动问题的方式,若大家有更好的方式或觉得code有哪点不妥,希望能够告诉我。