スクロールバーの表示を維持しながら、JavaScript でスクロールを一時的に無効にするにはどうすればよいですか?-jsチュートリアル-php.cn

スクロールバーの表示を維持しながら、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>// スクロールを防止しますevent<br>functionPreventDefault(e) {<br> e.preventDefault();<br>}</p>
<p>// スクロールに関連付けられたキーを禁止します<br>functionPreventDefaultForScrollKeys(e) {<br> if (キー[e.keyCode]) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 サイトの他の関連記事を参照してください。