如果鼠標下的元素只有“溢出-y：滾動”並水平滾動，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都沒有被調用過！ 如果子元素只有一個方向滾動，如何讓它為父元素觸發水平滾動？

小提琴移動示例： 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在孩子上overflow: scroll ，如果沒有任何東西可以水平滾動，它仍然不會觸發滾動事件！ https://jsfiddle.net/cn2hfLok/4/embedded/result/

Answer 1

如果孩子在您嘗試移動的方向上沒有任何內容可以滾動，或者它不聽那個方向，則不可能在 iOS Safari 上為父級捕獲滾動事件。 為了克服這個問題，您需要監聽子級上的觸摸事件，然后通過更改父級的scrollLeft或scrollTop將移動傳遞給父級，這將觸發父級的滾動事件處理程序。

聽：

touchstart

捕獲起始位置

touchmove

檢查當前位置相對於開始，如果它水平移動（並且垂直移動足夠小），然后通過parent.scrollLeft += startX - e.clientX;傳遞給父parent.scrollLeft += startX - e.clientX; 然后調用e.stopPropagation();e.preventDefault(); 所以它不會移動頁面。 （ e.clientX您的startX更新為e.clientX ）

touchend和touchleave

設置一些變量以告訴您的touchmove處理程序停止偵聽，例如notDragging = true;

Answer 2

我認為你應該朝着以下方向前進：

1. 為處理程序啟用捕獲階段： document.querySelector( ".parent" ).addEventListener( "scroll", scrollP, true );

2. 在父回調中停止傳播： e.stopPropagation();

在這種情況下，父級的偵聽器將攔截所有事件，包括horizontal scroll 。 但實際上你可以通過event.type和一堆其他可訪問的屬性來過濾它們。

這是更新的示例： https : //jsfiddle.net/cn2hfLok/7/