1.
由於瀏覽器必須要在執行事件處理函數之后,才能知道有沒有掉用過 preventDefault() ,這就導致了瀏覽器不能及時響應滾動,略有延遲。
所以為了讓頁面滾動的效果如絲般順滑,從 chrome56 開始,在 window、document 和 body 上注冊的 touchstart 和 touchmove 事件處理函數,會默認為是 passive: true。瀏覽器忽略 preventDefault() 就可以第一時間滾動了。
2. 解決:
2-1. 為容器設置css屬性touch-action,去除滑動時默認現象產生,但不影響事件觸發
touch-action: none;
2-2. 注冊處理函數時,用如下方式,明確聲明為不是被動的
window.addEventListener('touchmove', func, { passive: false })