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

Question

我有一个简单的例子，用户开始在触摸屏上滚动，一秒钟后，我想禁用滚动。我以为 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（添加 overflow:hidden）一起使用，但我特别想知道为什么 preventDefault 不起作用。

Answer 1

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

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

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

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

Javascript stop scrolling on touchmove after scrolling has already started

javascript

scroll

event-handling

preventdefault

touchmove