如何在保持滾動條可見性的同時暫時禁用 JavaScript 中的滾動？

在 JavaScript 中停用臨時捲動

使用scrollTo jQuery 外掛時，如果使用者在動畫播放時捲動，可能會出現問題進行中。雖然可以透過將 CSS 屬性「overflow」設為「hidden」來停用滾動，但更希望保持滾動條可見但不活動。

要實現此目的，有必要防止與滾動相關的互動事件。這包括滑鼠和觸控滾動，以及觸發滾動的按鈕。

程式碼實作

以下JavaScript 程式碼示範如何暫時停用與啟用捲動：

<br>//防止捲動事件<br>函數PreventDefault(e) {<br> e.preventDefault();<br>}<p>// 阻止與滾動相關的按鍵<br>function PreventDefaultForScrollKeys(e) {<br> if (keys[e.keyCode] ]） {</p><pre class="brush:php;toolbar:false">preventDefault(e);
return false;

}
}

//滾動鍵碼字典
const keys = {37: 1, 38: 1, 39: 1, 40: 1 } ;

//停用滾動
函數disableScroll() {
window.addEventListener('DOMMouseScroll', PreventDefault, false); // 舊版FF
window.addEventListener('wheel', PreventDefault, { Passive: false }); // 現代桌面
window
window. addEventListener('touchmove', PreventDefault, { Passive: false }); // mobile
window.addEventListener('keydown', PreventDefaultForScrollKeys, false);

}

// 啟用滾動
function enableScroll( ('DOMMouseScroll ', PreventDefault, false);
window.removeEventListener('wheel', PreventDefault, { Passive: false });
window.removeEventListener('touchmove', PreventDefault, { Passive: false }); 'keydown', PreventDefaultForScrollKeys, false);
}

要停用捲動，只需呼叫disableScroll()函數即可。若要再次啟用捲動，請呼叫enableScroll()函數。

以上是如何在保持滾動條可見性的同時暫時禁用 JavaScript 中的滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！