触摸移动某些元素时禁用滚动 [英] Disable scrolling when touch moving certain element

问题描述

我有一个页面，其中有一个部分可以用来绘制绘图.但是在移动浏览器上使用时，touchmove 事件(至少是垂直事件)也会滚动页面(这会降低绘图体验).有没有办法 a) 禁用 &重新启用页面的滚动(这样我可以在每一行开始时将其关闭，但在每行完成后将其重新打开)，或 b) 禁用 touchmove 事件的默认处理(可能还有滚动)到绘制草图的画布(我不能完全禁用它们，因为草图使用它们)?

I have a page with a section to sketch a drawing in. But the touchmove events, at least the vertical ones, are also scrolling the page (which degrades the sketching experience) when using it on a mobile browser. Is there a way to either a) disable & re-enable the scrolling of the page (so I can turn it off when each line is started, but turn it back on after each is done), or b) disable the default handling of touchmove events (and presumably the scrolling) that go to the canvas the sketch is drawn in (I can't just disable them completely, as the sketching uses them)?

我已经使用 jquery-mobile vmouse 处理程序来绘制草图，如果这有区别的话.

I've used jquery-mobile vmouse handlers for the sketch, if that makes a difference.

更新:在 iPhone 上，如果我选择要在其中绘制草图的画布，或者在绘制之前只按住手指一点，页面不会滚动，这不是因为我在页面中编码.

Update: On an iPhone, if I select the canvas to be sketched in, or just hold my finger for a bit before drawing, the page doesn't scroll, and not because of anything I coded in the page.

推荐答案

设置 touch-action CSS 属性为 none，即使使用 被动事件监听器:

Set the touch-action CSS property to none, which works even with passive event listeners:

touch-action: none;

当事件源自那个元素时，将此属性应用于元素不会触发默认(滚动)行为.

Applying this property to an element will not trigger the default (scroll) behavior when the event is originating from that element.

这篇关于触摸移动某些元素时禁用滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！