無法完全禁用雙指滑動手勢來瀏覽整個網站的瀏覽器歷史記錄,這對我來說是一個永恆的煩惱。直到這一點,至少可以通過在mousewheel事件上調用preventDefault()來阻止該行爲。無法阻止最新的Chrome版本(59)在Mac上導航手勢
這似乎並不被在Chrome中工作了59
下面是如何重現它:
- 開始手勢某處在頁面上,然後取消
- 從那裏,preventDefault無效。
有沒有人有解決這個問題?
例子
Zenkit和Airtable當你自己的表視圖內滾動兩個呼叫的preventDefault。它似乎一開始工作,但只要手勢被識別,然後取消至少一次(在桌子外面,防止默認未被調用),防止手勢不再工作(甚至在桌子內)。所以從那裏開始,滾動到表格左側幾乎是不可能的,因爲它總是觸發手勢。
在Trello的看板視圖中,只有在您位於滾動條的左側或右側時纔會出現。但我想這是因爲他們使用本地滾動,而Zenkit和Airtable使用CSS轉換。
我試圖在用戶開始滾動並在之後將其刪除後在內容頂部創建一個隱形滾動容器。這顯着減少了問題,但在所有情況下都不起作用。
例如代碼: https://codepen.io/anon/pen/gRKaMX
有在此筆3盒。
第一個使用overflow滾動本地滾動:滾動。這裏的手勢只能在scrollLeft爲0時觸發。
第二個有附加的事件監聽器,它在每個mousewheel事件上調用preventDefault。這首先會阻止手勢,但一旦您在頁面上的其他任何位置啓動它,它就不再起作用。
最後還有第三個div,您可以隨時啓動手勢。
的StackOverflow要我內聯的代碼一樣,所以在這裏它是:
HTML:
Native Scrolling:
<div id="native-scrolling" class="box">
<div></div>
</div>
Prevent gesture by calling prevent default. Only works if you didn't start the gesture anywhere else, yet:
<div id="prevent-gesture" class="box"></div>
Just a normal div:
<div class="box"></div>
的JavaScript:
$('#prevent-gesture').on('mousewheel', function (event) {
event.preventDefault();
});
CSS:
.box {
height: 100px;
width: 200px;
background: black;
}
#native-scrolling {
overflow: scroll;
}
#native-scrolling > div {
width: 200%;
height: 10px;
}
在此先感謝, 傑西
重新啓動我的電腦實際上修復了它... – Jesse
請告訴我你是在開玩笑。編輯:OMG重新啓動chrome真的解決了這個問題 – Dogoku