mobile safari 下overflow:auto的解决方法
来源:互联网 发布:淘宝发顺丰要补多少钱 编辑:程序博客网 时间:2024/06/05 03:30
这次有个项目需要完全支持ipad,中间还是遇到了不少的问题。今天有个div需要滚动条在ipad的safari下面失效,mobile safari因为多点触摸的缘故取消了局部区域的滚动条(为了防止和默认的拖动行为冲突)。首先排除了是不是本身布局问题造成的,为此建了一个简单的页面进行测试依然失效,google发现还真是有这样的问题,google reader上也是失效的,mobile safari为此需要使用两个手指才能完成滚动局部的行为。
为了解决这样的问题继续google,最后发现了上述的一篇文章,使用mobile safari的touchmove事件模拟滚动条的效果。废话不多说代码如下:
function isTouchDevice(){ try{ document.createEvent("TouchEvent"); return true; }catch(e){ return false; } } function touchScroll(id){ if(isTouchDevice()){ var el=document.getElementById(id); var scrollStartPos=0; document.getElementById(id).addEventListener("touchstart", function(event) { scrollStartPos=this.scrollTop+event.touches[0].pageY; event.preventDefault(); },false); document.getElementById(id).addEventListener("touchmove", function(event) { this.scrollTop=scrollStartPos-event.touches[0].pageY; event.preventDefault(); },false); } } touchScroll("popup-list");//最后使用touchScroll("MyElement"); 将你需要overflow:auto的元素id调用这个方法即可。
阅读全文
0 0
- mobile safari 下overflow:auto的解决方法
- mobile safari 下overflow:auto的解决方法
- overflow:auto的用法
- IE6下overflow:auto失效
- IE下overflow:hidden失效的解决方法
- overflow:auto
- Mac Safari VS Mobile Safari开启的宏
- Mac Safari VS Mobile Safari开启的宏
- ie6 overflow:auto不起作用的情况
- ie6,ie7下设置overflow:auto下滚动条不起作用
- h5在ios下overflow:auto,滑动没有惯性解决方案
- IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
- ie6 overflow:auto不起作用
- 关于jquery插件placeholder 1.3在chrome和safari下点击后不消失的解决方法
- Ext.form.DateField在chrome、safari下显示异常的解决方法
- overflow:auto在ie6/7上的诡异??
- 设置overflow:auto表格没有滚动条的解决办法
- 堆栈溢出(Stack Overflow)的解决方法
- JNI转换通俗易懂的总结(Java调用C++篇)
- FFMPEG 实现 YUV,RGB各种图像原始数据之间的转换(swscale)——读完清晰明了
- 初识UML(一)
- JQuery事件-6.29
- mysql5.7安装过程中出现的错误--无法定位程序输入点 于动态链接库
- mobile safari 下overflow:auto的解决方法
- Linux ls 命令 详解
- Cocoapods导入ReactiveCocoa5.0以上版本注意事项
- jar包和war包的介绍和区别
- iOS 获取手机上已经安装的应用
- npm 安装权限问题
- spark源码总结
- Springboot整合Mybatis实现Druid多数据源
- 基本数据类型的进制转换问题