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;
          });
      }
    }
  • 相关阅读:
    配置samba
    extern c
    剑指offer 孩子们的游戏
    剑指offer 扑克牌顺子
    剑指offer 翻转单词顺序列
    剑指offer 左旋转字符串
    mysql查看或显示当前存在多少数据库
    vim替换
    平衡二叉树
    将employees表的所有员工的last_name和first_name拼接起来作为Name,中间以一个空格区分
  • 原文地址:https://www.cnblogs.com/fengjian/p/2848006.html
Copyright © 2011-2022 走看看