Firefox，觸摸事件和“平滑”滾動行為 - 導致無法滾動
[英]Firefox, touch events and “smooth” scroll behaviour – results in no scrolling
問題描述
我不知道這里發生了什么。
請參閱CodePen： https ：//codepen.io/ilmiont/pen/jJjgPw ？ editors = 1111
使用觸摸屏進行滑動可以使用“平滑”滾動行為平滑地上下移動屏幕。
這與Chrome完全一致。
Firefox ...只是不滾動。 然而觸摸事件被觸發，並且“Next”/“Previous”被記錄到控制台。 但是當使用{behavior: "smooth"}調用時， scrollIntoView(...)調用不會執行任何操作。
如果單擊該按鈕，滾動行為將更改為auto （無平滑滾動）...這在Firefox中沒有任何問題。
我錯過了什么？ 當使用smooth滾動行為時，為什么Firefox根本不滾動，即使看起來滑動被正確檢測到了？
更奇怪的是：該示例在CodePen中的Chrome中也不起作用。 將HTML / CSS / JS復制到一個新文檔中（右鍵單擊CodePen查看器，“查看框架源”）並直接在瀏覽器中運行，它可以完全按照預期工作，並在頁面內平滑滾動。
我想我一定錯過了什么，Chrome中的CodePen問題很有意思，但我現在看不到什么。
Chrome ...只是有效......除了CodePen。
Firefox ......一切看起來都應該有效，但滾動永遠不會發生。
1 個解決方案
解決方案1
0 2019-03-29 10:53:03
這花了我太長時間才弄明白，但這里的解決方案最終有效：
使用被動事件監聽器！
在原始筆中，我正在做{passive: false} ，然后在touchstart和touchmove事件上調用preventDefault(...) 。
事實證明，這不是實現預期效果所必需的。
使用被動偵聽器可以使Firefox中的所有內容都按預期工作。
我仍然認為原來的行為是奇怪的; 進一步的調查顯示Firefox似乎存在時間問題。 在swipe(...)方法中，向dispatchEvent(...)調用添加250ms超時會導致一切按預期工作 - 似乎觸摸處理程序可以繼續阻止/限制滾動事件過去它們應該已被刪除。
將繼續調查，但我現在有一個解決方案。
（ 編輯 - 忘了提及，當使用被動偵聽器時，還要在目標上設置touch-action: none 。）
偵聽javascript觸摸事件，但仍允許默認滾動行為
[英]Listening for javascript touch events but still allowing default scrolling behaviour
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.