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;
      });
  }
}
原文地址:https://www.cnblogs.com/fengjian/p/2848006.html