zoukankan      html  css  js  c++  java
  • mobile safari 下overflow:auto的解决方法

    这次有个项目需要完全支持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调用这个方法即可。
  • 相关阅读:
    [YTU]_2917(Shape系列-3)
    c3p0-0.9.2.1.bin用于jdbc链接池
    C#加密解密DES字符串<转>
    Bechmarksql
    PHP中foreach有关引用的问题
    jqgrid 原理2
    jqggrid原理2
    jqgrid1原理
    JQgrid 入门
    搞开发真的是 坑太多了,
  • 原文地址:https://www.cnblogs.com/top5/p/2458948.html
Copyright © 2011-2022 走看看