首頁 > web前端 > js教程 > 如何在保持滾動條可見性的同時暫時禁用 JavaScript 中的滾動?

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

Mary-Kate Olsen
發布: 2024-12-14 14:38:12
原創
211 人瀏覽過

How Can I Temporarily Disable Scrolling in JavaScript While Maintaining Scrollbar Visibility?

在 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板