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;
          });
      }
    }
  • 相关阅读:
    找不到vc_runtimeMinimum_x86.msi!
    ubuntu开启coredump
    log4j2项目打成jar包运行日志无法打印
    linux 下使用 tc 模拟网络延迟和丢包
    Spring MVC
    typora实现图片上传
    java异常和调优
    java线程
    java三大特征
    webstorm如何更换主题以及更换主题后字体缩放问题
  • 原文地址:https://www.cnblogs.com/fengjian/p/2848006.html
Copyright © 2011-2022 走看看