滚动已经开始后，Javascript在touchmove上停止滚动

Posted 2023-05-08

【中文标题】滚动已经开始后，Javascript在touchmove上停止滚动

【英文标题】：Javascript stop scrolling on touchmove after scrolling has already started

【发布时间】：2021-08-18 10:16:45

【问题描述】：

我有一个简单的例子，用户开始在触摸屏上滚动，然后一秒钟后，我想禁用滚动。我以为 event.preventDefault() 会停止滚动，但滚动已经开始后它似乎不起作用

这里是一个例子：https://jsfiddle.net/7s5m8c6L/30/

let allowScroll=true;

function TS(e)//touchstart handler
  setTimeout(function()
    allowScroll=false;
  ,1000)


function TM(e)//touchmove handler
  if(!allowScroll)
    e.preventDefault();
  

在这个例子中，你可以开始滚动，一秒钟后，我希望滚动停止，但它没有。我知道有一些方法可以让它与 CSS 一起工作（添加溢出：隐藏），但我特别想知道为什么 preventDefault 不起作用。

【参考方案1】：

如果你使用的是chrome，控制台中有提示：

[干预] 忽略使用 cancelable=false 取消 touchmove 事件的尝试，例如因为滚动正在进行中且无法中断。

问题正是Event.cancelable。不幸的是，这个属性是只读的，调用preventDefault 来处理不可取消的事件是不安全的。如果您在TM 函数中打印e.cancelable，您可以观察到在整个滚动过程中e.cancelable 是错误的。