[英]Javascript stop scrolling on touchmove after scrolling has already started
I have a simple example where a user starts to scroll on a touch screen, and then after one second, I want to disable scrolling.我有一个简单的例子,用户开始在触摸屏上滚动,然后一秒钟后,我想禁用滚动。 I thought event.preventDefault() would stop the scrolling but it doesn't seem to work after scrolling has already started我认为 event.preventDefault() 会停止滚动,但滚动已经开始后它似乎不起作用
Here is an example: https://jsfiddle.net/7s5m8c6L/30/这是一个例子: 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();
}
}
In this example, you can start scrolling, and after a second, I want the scrolling to stop, but it does not.在此示例中,您可以开始滚动,一秒钟后,我希望滚动停止,但它没有。 I know there are ways that I can get this to work with CSS (adding overflow:hidden), but I would particularly like to know why preventDefault doesn't work.我知道有一些方法可以让它与 CSS 一起工作(添加溢出:隐藏),但我特别想知道为什么 preventDefault 不起作用。
If you are using chrome, there is a hint in the console:如果您使用的是 chrome,控制台中有提示:
[Intervention] Ignored attempt to cancel a
touchmove
event withcancelable=false
, for example because scrolling is in progress and cannot be interrupted. [干预] 忽略使用cancelable=false
取消touchmove
事件的尝试,例如因为滚动正在进行中且无法中断。
The problem is exactly that Event.cancelable
.问题正是Event.cancelable
。 Unfortunately for you this property is read-only and it is not safe to call preventDefault
for a not cancelable event.不幸的是,这个属性是只读的,为不可取消的事件调用preventDefault
是不安全的。 If you print e.cancelable
in the TM
function you can observe that throughout the scrolling e.cancelable
is false.如果您在TM
function 中打印e.cancelable
,您可以观察到在整个滚动过程中e.cancelable
是错误的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.