javascript - iScroll 在一个轴上进行原生滚动

Question

我用的是最棒的javascript工具iScroll4 http://cubiq.org/iscroll-4在适用于 iOS 和 Android 的移动网站上。这是我的布局:

水平滚动区域使用 iScroll4，设置如下:

   var myScroll = new iScroll('frame',  { hScrollbar: false, vScrollbar: false, vScroll: false })

水平滚动部分效果很好。当用户尝试将手指放在水平滚动区域上向上或向下滚动页面时会发生此问题。所以我需要在同一区域进行原生垂直滚动和 iScroll 水平滚动。

到目前为止我尝试过的:删除 iScroll 代码中的 e.preventDefault()(允许 native 滚动，但在两个轴上)。删除 e.preventDefault() 然后禁用水平滚动页面宽度:

var touchMove;

document.ontouchstart = function(e){
    touchMove = e.touches[0];
}

document.ontouchmove = function(e){
    var theTouch = e.touches[0] || e.changedTouches[0];
    var Xer      = rs(touchMove.pageX - theTouch.pageX).toPos();
    var Yer      = rs(touchMove.pageY - theTouch.pageY).toPos();        
    touchMove    = theTouch;
    if(Yer > Xer){ e.preventDefault(); }
}

这似乎什么都不做。如何在不丢失 iScroll 的水平滚动的情况下允许水平滚动区域中的 native 垂直滚动？我在这里真的很困惑。提前致谢。

(仅作记录 rs(foo).toPos() 是一个使 foo 成为正数的函数，无论其值如何)。

Answer 1

如果您想在不破解核心、不从 iScroll 更改为 swipeview 的情况下实现 Fresheyeball 所描述的效果，那么 iScroll 4 确实为您提供了它的事件监听器。

myScroll = new iScroll('scrollpanel', {
    // other options go here...
    vScroll: false,
    onBeforeScrollMove: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            // user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        } else {
            // delegate the scrolling to window object
        window.scrollBy( 0, -this.distY );
    }
    },
});

通过这样做，onBeforeScrollMove-Handler 检查滚动方向是否看起来是水平的，然后阻止默认处理程序，从而有效地将滚动操作锁定到 X 轴(尝试注释它出来，你会看到区别)。否则，如果滚动方向需要垂直，我们通过 window.scrollBy() 方法使浏览器滚动。这不完全是原生的，但工作得很好。

希望对你有帮助

卢克斯

[编辑]我原来的解决方案没有使用 window.scrollBy() ，在速度较慢的三星手机上不起作用，这就是我需要调整答案的原因。