スクロールバーを非表示にせずに、JavaScript でスクロールを一時的に無効にする方法-jsチュートリアル-php.cn

スクロールバーを非表示にせずに、JavaScript でスクロールを一時的に無効にする方法

Barbara Streisand

リリース： 2024-12-21 01:45:10

オリジナル

219 人が閲覧しました

How to Temporarily Disable Scrolling in JavaScript without Hiding the Scrollbar?

スクロールを一時的に無効にする方法

scrollTo jQuery プラグインの使用中にスクロールを一時的に無効にする 1 つの方法は、「本文」の CSS を調整することです。 " 要素。ただし、この方法ではスクロールバーが非表示になる可能性があり、望ましくない場合があります。

より効果的な解決策は、特定のインタラクションイベントがスクロールをトリガーしないようにすることです。これらのイベントには以下が含まれます:

マウススクロール
タッチスクロール
スクロールに関連付けられたボタン

このソリューションを実装するには、次を使用できます。次の JavaScript コード:

// Disable scrolling
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener('wheel', preventDefault, { passive: false }); // modern desktop
  window.addEventListener('touchmove', preventDefault, { passive: false }); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Enable scrolling
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 サイトの他の関連記事を参照してください。