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

可水平滚动的区域使用具有以下设置的iScroll4:

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

水平滚动部分效果很好。当用户尝试向上或向下滚动页面并将其手指放在水平滚动区域上时,会发生此问题。因此,我需要在同一区域进行 native 垂直滚动和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(); }
}

这似乎无能为力。如何允许水平滚动区域中的 native 垂直滚动而不丢失iScroll的水平滚动?我真的很为难。提前致谢。

(仅出于记录rs(foo).toPos()是使foo成为正数而不管其值如何的函数)。

最佳答案

如果您想获得Fresheyeball所描述的效果而又不破坏内核,又不从iScroll更改为swipeview,那么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检查滚动方向是否似乎是水平的,然后阻止默认处理程序,从而有效地将滚动 Action 锁定到X轴(尝试将其注释掉,您会看到区别)。否则,如果滚动方向需要垂直,我们可以通过window.scrollBy()方法使浏览器滚动。这不是完全 native 的,但工作正常。

希望能有所帮助

卢克斯

[编辑]
我原来的解决方案(不使用window.scrollBy())在较慢的三星手机上不起作用,这就是为什么我需要调整答案。

10-07 19:17
查看更多