[英]Disable scrolling when touch moving certain element
我有一個頁面，其中有一個部分用於繪制繪圖。但是在移動瀏覽器上使用它時，touchmove 事件，至少是垂直事件，也在滾動頁面（這會降低繪圖體驗）。 有沒有辦法a）禁用和重新啟用頁面的滾動（這樣我可以在每行開始時將其關閉，但在每行完成后將其重新打開），或b）禁用默認處理從 go 到繪制草圖的 canvas 的 touchmove 事件（可能是滾動）（我不能完全禁用它們，因為草圖使用它們）？
我已經在草圖中使用了 jquery-mobile vmouse 處理程序，如果這有所作為的話。
更新：在 iPhone 上，如果我要繪制 select canvas，或者在繪圖前按住我的手指一會兒，頁面不會滾動，而不是因為我在頁面中編碼的任何內容。
注意：正如@nevf 在評論中指出的那樣， 由於性能變化，此解決方案可能不再有效（至少在 Chrome 中）。 建議使用
touch-action，@JohnWeisz's answer也建議使用它。
與@Llepwryd 給出的答案類似，我使用了ontouchstart和ontouchmove的組合來防止在某個元素上滾動。
原樣來自我的一個項目：
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
if ($(e.target).closest('#mobileMenuHeader').length == 1)
{
blockMenuHeaderScroll = true;
}
});
$(window).on('touchend', function()
{
blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
if (blockMenuHeaderScroll)
{
e.preventDefault();
}
});
本質上，我正在做的是監聽觸摸開始，看看它是否開始於使用 jQuery .closest的另一個元素的子元素上，並允許它打開/關閉滾動時的觸摸移動。 e.target指的是觸摸開始的元素。
您想防止觸摸移動事件的默認設置，但是您還需要在觸摸事件結束時為此清除標志，否則觸摸滾動事件將不起作用。
這可以在沒有 jQuery 的情況下完成，但是對於我的使用，我已經有了 jQuery 並且不需要編寫代碼來查找元素是否具有特定的父元素。
截至 2013 年 6 月 18 日在 Android 和 iPod Touch 上的 Chrome 中測試
CSS 上有一個小“hack”，它也允許您禁用滾動：
.lock-screen {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
將該類添加到正文將阻止滾動。
document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
這應該可以防止滾動，但它也會破壞其他觸摸事件，除非您定義了一種自定義方式來處理它們。
最終的解決方案是設置overflow: hidden; 在document.documentElement像這樣：
/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
document.documentElement.style.overflow = 'hidden';
});
document.addEventListener('touchend', function(e) {
document.documentElement.style.overflow = 'auto';
});
通過設置overflow: hidden在觸摸開始時隱藏窗口之外的所有內容，從而消除滾動任何內容的可用性（沒有滾動內容）。
在touchend之后，可以通過將overflow設置為auto （默認值）來釋放鎖。
最好將它附加到<html>因為<body>可以用來做一些樣式，而且它可以使孩子表現出意外。
編輯：關於touch-action: none; - 根據 MDN Safari 不支持它。
嘗試在觸摸事件發生時隱藏在您不想滾動的東西上的溢出。 例如在開始時設置溢出隱藏並在結束時將其設置回自動。
你試了嗎？ 我很想知道這是否有效。
document.addEventListener('ontouchstart', function(e) {
document.body.style.overflow = "hidden";
}, false);
document.addEventListener('ontouchmove', function(e) {
document.body.style.overflow = "auto";
}, false);
我發現ev.stopPropagation(); 為我工作。
令我驚訝的是，“preventDefault()”方法在 iOS 13.7 上的最新 Google Chrome（版本 85）上對我有用。 它也適用於同一設備上的 Safari，也適用於我的 Android 8.0 平板電腦。 我目前在我的網站上實現了它的 2D 視圖： https : //papercraft-maker.com
這在 iPhone 上對我有用
$(".owl-carousel").on('touchstart', function (e) {
e.preventDefault();
});
這樣做的現代方式（2022）是使用 mozilla 文檔中概述的指針事件：https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
指針事件建立在 touchstart 和其他觸摸事件之上，並且默認情況下實際上會停止滾動事件以及其他改進。
如何在DIV元素上滾動時禁用頁面滾動並在計數器達到某個值時啟用滾動
[英]How to disable page scrolling when scrolling on a DIV element and enable scrolling when a counter reaches a certain value
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.