javascript - 如果鼠标下的元素只有 "overflow-y: scroll"并且水平滚动，iOS Safari 似乎永远不会触发滚动事件

Question

我有两个元素，一个父节点和一个子节点。子项只能垂直滚动(overflow: hidden; overflow-y: scroll;)。父级只能水平滚动(overflow: hidden; overflow-x: scroll;)。当我在子节点上横向滑动时，尽管这样做，但没有触发任何滚动事件:

//NEITHER of these are fired when swiping sideways on the child
child.addEventListener( "scroll", listener, true );
parent.addEventListener( "scroll", listener2, true );

如果我在 child 上方垂直滚动，浏览器仅会触发滚动事件! listener 和 listener2 都没有被调用!如果子元素只有一个方向滚动，我如何让它触发父元素的水平滚动？

Fiddle 移动示例:https://jsfiddle.net/cn2hfLok/2/embedded/result/

HTML:

<div class="parent">
    <div class="child">
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />
    </div>
    <div style="width: 5000px;">s</div>
</div>

CSS:

.parent
{
    position:relative;
    width: 600px;
    height: 100%;
    background-color: yellow;
    overflow: hidden;
    overflow-x: scroll;
}

.child
{
    position:relative;
    width: 50%;
    height: 200px;
    background-color: blue;
    overflow: hidden;
    overflow-y: scroll;
}

JavaScript:

function scrollC(e)
{
    console.log( "child" );
}

function scrollP(e)
{
    console.log( "parent" );
}

document.querySelector( ".child" ).addEventListener( "scroll", scrollC );
document.querySelector( ".parent" ).addEventListener( "scroll", scrollP );

编辑:即使 overflow: scroll 出现在 child 身上，如果没有任何东西可以水平滚动，它仍然不会触发滚动事件! https://jsfiddle.net/cn2hfLok/4/embedded/result/

Answer 1

如果子项在您尝试移动的方向上没有可滚动的内容，或者它不听那个方向，则不可能在 iOS Safari 上为父项捕获滚动事件。为了克服这个问题，您需要监听子项上的触摸事件，然后通过更改父项的 scrollLeft 或 scrollTop 将触发父项滚动的 Action 传递给父项事件处理程序。

收听:

触摸启动

捕捉起始位置

触摸移动

根据开始检查当前位置，如果它水平移动(垂直移动足够小)，然后通过 parent.scrollLeft += startX - e.clientX; 传递给父级，然后调用 e.stopPropagation();e.preventDefault(); 所以它不会移动页面。 (同时将您的 startX 更新为 e.clientX)

touchend 和 touchleave

设置一些变量来告诉您的touchmove 处理程序停止监听，例如notDragging = true;