IOS端拖动的问题

来源：互联网发布：日本娱乐圈的黑暗知乎编辑：程序博客网时间：2024/06/06 02:58

解决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有哪点不妥,希望能够告诉我。

阅读全文

0 0