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 );

如果我在子项上垂直滚动，浏览器仅才会触发滚动事件! 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，如果没有什么可以水平滚动，它仍然不会触发滚动事件! https://jsfiddle.net/cn2hfLok/4/embedded/result/

Answer 1

如果子级没有任何东西可以朝您尝试移动的方向滚动，或者它不听从该方向，则父级无法在 iOS Safari 上捕获滚动事件。为了克服这个问题，您需要监听子级上的触摸事件，然后通过更改父级的 scrollLeft 或 scrollTop 来将该移动传递给父级，这将触发父级的滚动事件处理程序。

听:

触摸启动

捕获起始位置

触摸移动

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

touchend 和 touchleave

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