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;
          });
      }
    }
  • 相关阅读:
    Java三大框架
    单例模式和工厂模式(百度文库)
    使用java代码编辑oracle数据库
    extends 与implements的区别和用法
    介绍MVC编程架构模式
    接口具体是什么东西
    Servlet和JSP的本质和区别
    用户注册,登录,留言系统
    页面跳转的五种方法
    cookie的长度和限制数量
  • 原文地址:https://www.cnblogs.com/fengjian/p/2848006.html
Copyright © 2011-2022 走看看