解釋
是chrome為了提高頁面的滑動流暢度而新折騰出來的一個東西
由於瀏覽器必須要在執行事件處理函數之后,才能知道有沒有掉用過 preventDefault() ,這就導致了瀏覽器不能及時響應滾動,略有延遲。
所以為了讓頁面滾動的效果如絲般順滑,從 chrome56 開始,在 window、document 和 body 上注冊的 touchstart 和 touchmove 事件處理函數,會默認為是 passive: true。
瀏覽器忽略 preventDefault() 就可以第一時間滾動了。
解決
方案1、注冊處理函數時,用如下方式,明確聲明為不是被動的
window.addEventListener('touchmove', func, { passive: false })
方案2、應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會產生默認行為,但是 touch 事件照樣觸發。例 使用全局樣式樣式去掉默認行為
* { touch-action: none; }
補充:
touch-action也可取一下值
none:當觸控事件發生在元素上時,不進行任何操作。因此使用none無法觸摸
pan-x:啟用單指水平平移手勢。可以與 pan-y 、pan-up、pan-down 和/或 pinch-zoom 組合使用。
pan-y:啟用單指垂直平移手勢。可以與 pan-x 、pan-left 、pan-right 和/或 pinch-zoom 組合使用。
[注]未來可能所有的元素的 touchstart touchmove 事件處理函數都會默認為 passive: true