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调用这个方法即可。
原文:http://www.189works.com/article-55837-1.html
后续开发中发现中间INPUT等DOM在滚动DIV中不能触发事件,修正方法:
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'A')
event.preventDefault();
分享到:
相关推荐
压缩包包含 W3School,jquery,css2/css3 ,jquery mobile1.2.0的所有API
html5 开发 jquery.mobile.theme-1.4.5.min.css 样式表
web就餐刷卡页面设计web就餐刷卡页面设计web就餐刷卡页面设计
mobileSelect.css
jquery.mobile.css
应作为项目的dependencies之一安装: npm install --save mobile-safari-fullscreen 用法import FullScreen from 'mobile-safari-fullscreen'import styles from 'mobile-safari-fullscreen/index.module.css';...
wap站基于Html5和jquery-mobile的demo示例,去除官方jquery-mobile.css的黑色样式,可以随意添加样式。
CSS3 transitions transform animation jquery mobile
(Wrox) Professional Iphone & Ipod Touch Programming--Building Applications For Mobile Safari
jquery.mobile 相关js css 全面有效 安全无痛 下载可用
JQueryMobile1.4.5.min.js JQueryMobile1.4.5.min.css JQueryMobile1.2全套资源
jquery mobile css3手机表单页面布局按钮样式
jQuery Mobile CSS 类 jQuery CSS 类 jQuery Mobile CSS 类来设置不同元素的样式。 以下列表包含了通用的 CSS 样式: 全局类 以下类可以在 jQuery Mobile 小工具中使用 (按钮,工具条,面板,表格,列表等。): ...
jquery.mobile-1.4.5.min.css css资源供大家分享使用资源供大家分享使用
HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌.pdf
Doxygen手机 基于Doxygen 1.8.13 Doxyfile: HTML_EXTRA_STYLESHEET += style/doxygen_mobile.css
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
HTML5 CSS3 jQueryMobile-源代码+视频教学