凌动小生的Blog

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

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;
      });
  }
}
posted on 2013-01-06 17:05  凌动小生  阅读(430)  评论(0)    收藏  举报