首页 > 建站教程 > JS、jQ、TS >  解决iscroll横向滚动无效的问题正文

解决iscroll横向滚动无效的问题

我爱模板网在做一个电视台的html5时,用到了iscroll的上拉刷新和下拉加载,效果很不错,也很流畅。但是,在这个iscroll的滚动区域有个下面的效果

iscroll

“热门视频”这块内容是超出宽度显示的,需要左右滑动显示,这时,由于套在iscroll里面,导致无法左右滑动,在网上找到了方法,解决了:

代码如下:
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.absDistY = 0;
        }, 600);
    }
});
在onTouchEnd里面做处理,每次滑动之后都重置absDistX/Y的值。为什么要使用setTimeout?其实是为了防止误判断,太敏感也不好,有时候你只是想左右滑动虽然滑动的角度有点朝上或朝下。