使用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 });
}
以上是如何在保持滾動條可見性的同時暫時禁用 JavaScript 中的滾動?的詳細內容。更多資訊請關注PHP中文網其他相關文章!