zoukankan      html  css  js  c++  java
  • 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件。这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡。

    Google搜了一下,看来很多人都为这个问题而烦恼。有高人给出了解决方案,在 这里 可以找到。

    代码如下:

    myScroll = new iScroll('scrollpanel', {
        // other options go here...
        vScroll: false,
        onBeforeScrollStart: function ( e ) {
            if ( this.absDistX > (this.absDistY + 5 ) ) {
                // user is scrolling the x axis, so prevent the browsers' native scrolling
                e.preventDefault();
            }
        }
    });

    重写onBeforeScrollStart事件,判断touch的滑动距离,只在横向滑动距离大于竖向滑动距离时(也就是左右滑动时)才取消 默认事件,这样就不影响页面滚动了。看iScroll源码,onBeforeScrollStart: function (e) { e.preventDefault(); }, 它默认是直接取消默认事件。

    到这里的时候感觉就不错了。但是不要高兴的太早。

    上下滑动横向滚动区域,页面确实可以滚动了,但在多体验了几次页面之后,又出现了一个问题。

    先左右滑动该区域,滚动停止后再按住该区域想滚动页面,你会发现它还是不能滚动页面,这时你再点击一次该区域,这时可以了。这相对于你需要触摸2次才能滚动页面, 这样的行为还是让人无法接受。

    经过多翻测试,我把问题锁定到absDistX/Y上。最后发现,在左右滑动之后absDistX/Y的值不会重置,第二次滑动该区域时执行onBeforeScrollStart事件,里面absDistX/Y值是上一次的值,所以程序还是阻止了页面滚动。

    解决方法如下:

    myScroll = new iScroll('scrollpanel', {
        // other options go here...
        hScroll: true,
        onBeforeScrollStart: function ( e ) {
            if ( this.absDistX > (this.absDistY + 5 ) ) {
                // user is scrolling the x axis, so prevent the browsers' native scrolling
                e.preventDefault();
            }
        },
        //解决第一次无法滑动的问题
        onTouchEnd: function () {
      var self = this;
      if (self.touchEndTimeId) {
        clearTimeout(self.touchEndTimeId);
      }
    
      self.touchEndTimeId = setTimeout(function () {
        self.absDistX = 0;
        self.absDistX = 0;
      }, 600);
        }
    });

    在onTouchEnd里面做处理,每次滑动之后都重置absDistX/Y的值。为什么要使用setTimeout?其实是为了防止误判断,太敏感也不好,有时候你只是想左右滑动虽然滑动的角度有点朝上或朝下。

  • 相关阅读:
    页面的三大家族
    封装函数
    图片自动播放的案例
    动画封装
    长图滚动案例+点名册案例
    时钟案例
    伪随机数,随机数种子seed
    numpy.tolist( )函数
    countif( ) 函数判断当前单元格的身份证号码是否重复出现
    Excel技巧
  • 原文地址:https://www.cnblogs.com/subtract/p/4780011.html
Copyright © 2011-2022 走看看