zoukankan      html  css  js  c++  java
  • Scrolling a overflow:auto; element on android touch screen device

    In mobile Safari on the iPhone, iPod Touch, and iPad (as well as the webkit based browser on Android phones) it's not immediately obvious how to scroll a div that has overflow:auto; set on it. If this were a desktop browser you would see scrollbars and be able to manipulate those or even use your mouse wheel. No such concepts exist on a touch screen device!

    function touchScroll(selector) {
      if (isTouchDevice()) {
          var scrollStartPosY=0;
          var scrollStartPosX=0;
          $(“body”).delegate(selector, ‘touchstart’, function(e) {
            scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
          });
          $(“body”).delegate(selector, ‘touchmove’, function(e) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
              this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||
              (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
                  e.preventDefault(); 
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
              this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||
              (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
                  e.preventDefault(); 
            this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
          });
      }
    }
  • 相关阅读:
    双向认证SSL原理
    p12证书转keystore签名
    Loadrunner对https协议(单双向SSL)的web端性能测试
    关于Unity中新版动画系统的使用
    关于Unity中旧版动画系统的使用
    关于Unity中Mesh网格的详解
    关于Unity中Time.deltaTime的使用
    关于Unity中的光照(七)
    关于Unity中的光照(六)
    关于Unity中的光照(五)
  • 原文地址:https://www.cnblogs.com/fengjian/p/2848006.html
Copyright © 2011-2022 走看看