スクロールバーの表示を維持しながら、JavaScript でスクロールを一時的に無効にするにはどうすればよいですか?

JavaScript での一時スクロールを無効にする

scrollTo jQuery プラグインを使用する場合、アニメーションの表示中にユーザーがスクロールすると問題が発生する可能性があります。進行中。 CSS プロパティの「overflow」を「hidden」に設定することでスクロールを無効にすることはできますが、スクロールバーを表示しながら非アクティブにしておくことがより望ましいです。

これを実現するには、スクロールに関連するインタラクション イベントを防ぐ必要があります。これには、マウスとタッチ スクロール、およびスクロールをトリガーするボタンが含まれます。

コードの実装

次の JavaScript コードは、スクロールを一時的に無効または有効にする方法を示しています。

<br>// スクロールを防止しますevent<br>functionPreventDefault(e) {<br> e.preventDefault();<br>}<p>// スクロールに関連付けられたキーを禁止します<br>functionPreventDefaultForScrollKeys(e) {<br> if (キー[e.keyCode]) {</p><pre class="brush:php;toolbar:false">preventDefault(e);
return false;

}
}

// スクロール キー コードの辞書
const key = {37: 1, 38: 1, 39: 1, 40: 1 };

// スクロールを無効にする
function disableScroll() {
window.addEventListener('DOMMouseScroll',PreventDefault,false); // 古い FF
window.addEventListener('wheel',PreventDefault, {passive: false }); // モダン デスクトップ
window.addEventListener('touchmove',PreventDefault, {passive: false }); // mobile
window.addEventListener('keydown',PreventDefaultForScrollKeys, false);
}

// スクロールを有効にする
function enableScroll() {
window.removeEventListener('DOMMouseScroll) '、preventDefault、false);
window.removeEventListener('wheel',PreventDefault, { Passive: false });
window.removeEventListener('touchmove',PreventDefault, { Passive: false });
window.removeEventListener('keydown',PreventDefaultForScrollKeys, false);
}

スクロールを無効にするには、単純に disableScroll() 関数を呼び出します。スクロールを再度有効にするには、enableScroll() 関数を呼び出します。

以上がスクロールバーの表示を維持しながら、JavaScript でスクロールを一時的に無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。