mobile safari 下overflow:auto的解决方法
来源:互联网 发布:帝国cms 自定义表单 编辑:程序博客网 时间:2024/05/19 18:37
这次有个项目需要完全支持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()){ //if touch events exist...
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("MyElement"); 将你需要overflow:auto的元素id调用这个方法即可。
- 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)的解决方法
- VS LoadTest学习笔记V0.1
- maven环境快速搭建
- Linux下安装 lcov
- 使用tinyxml读取xml文件
- 基于Visual C#2010开发Windows7应用 多点触摸图片处理应用程序(2)-使用多点触摸操作处理图片 .
- mobile safari 下overflow:auto的解决方法
- 8086系列寄存器的分类和功能
- autoconf常用宏
- TOMCAT设置内存大小
- 九度OJ 题目1181:遍历链表
- 互联网创业小团队成功必备2点
- enum 关键字
- 《W5200E01-M3远程固件更新教程》之app.bin程序说明&上位机程序说明
- 判断当前是横屏还是竖屏