jqueryページでページのスクロールが禁止されています-フロントエンドQ&A-php.cn

jqueryページでページのスクロールが禁止されています

WBOY

リリース： 2023-05-14 09:58:37

オリジナル

1940 人が閲覧しました

Web ページを開発する場合、ポップアップモーダルボックスやポップアップメニューなど、特定の状況下でページのスクロールを禁止する必要がある状況に遭遇することがあります。この場合、jQuery を使用してページのスクロールを無効にすることができます。 jQueryを使ってページのスクロールを防ぐ方法を詳しく紹介します。

1. スクロールの取得と禁止

まず、スクロールバーを取得する必要があります。次のコードを使用してスクロールバーを取得できます。

var scrollTop = $(window).scrollTop();

ログイン後にコピー

その中で、scrollTop() はスクロールバーの位置を取得するために jQuery で使用されるメソッドです。 scrollTop の値を取得した後、次のコードを使用してページのスクロールを防ぐことができます:

$('body').addClass('noscroll').css({
   'top': -scrollTop + 'px'
 });

ログイン後にコピー

ここでは、カスタムクラス noscroll をページの body 要素に追加し、top 属性を設定してbody 要素ページのスクロールを無効にするには、位置を上に移動します。ページのちらつきを避けるために、ページのスクロールを無効にするときは、scrollTop 値を負の数に設定する必要があることに注意してください。同様に、次のコードを使用してページのスクロールを復元することもできます。

$('body').removeClass('noscroll');
$(window).scrollTop(scrollTop);

ログイン後にコピー

ここでは、ページの body 要素のクラス noscroll を削除し、scrollTop() メソッドを使用してスクロールバーを設定します。位置を元の値に戻し、ページのスクロールを復元できるようにします。

2. スクロールバーの幅の変更を避ける

ページスクロールを無効にすると、スクロールバーが消えるとページ幅が縮小し、ページのジッターが発生するという問題が発生します。この問題を解決するには、HTML 構造にプレースホルダー要素を追加します。スクロールが無効な場合、要素の幅は現在のページのスクロールバーの幅に設定され、ページのジッターを回避します。以下は、プレースホルダー要素を追加するコードです:

<body>
  <div class="scrollbar-width"></div>
  <!-- 页面其余结构 -->
</body>

ログイン後にコピー

次に、次のコードを使用して、スクロールバーの幅を取得できます:

function getScrollbarWidth() {
  var outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);
  var widthNoScroll = outer.offsetWidth;
  // force scrollbars
  outer.style.overflow = 'scroll';
  // add innerdiv
  var inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);        
  var widthWithScroll = inner.offsetWidth;
  // remove divs
  outer.parentNode.removeChild(outer);
  return widthNoScroll - widthWithScroll;
};

ログイン後にコピー

ここでは、関数を使用してスクロールバーの幅を取得します。スクロールバーの幅。まず、div 要素が作成され、可視性: 非表示、幅: 100px にスタイル設定されます。次に、msOverflowStyle スタイルをスクロールバー (WinJS アプリケーションの場合) に設定し、それをドキュメントの body 要素に追加します。次に、innerWidth プロパティを使用してスクロールバーの幅を取得します。次に、オーバーフロースタイルをスクロールに設定し、内側に新しい div 要素を作成して、元の div 要素の外側を埋めます。最後に、内側の幅を 100% に設定し、その innerWidth を取得します。最後に行うことは、div 要素を削除し、前の幅から次の幅を減算してスクロールバーの幅を取得することです。

3. 完全なコード

最後に、上で紹介したコードを結合して、ページスクロールを禁止する完全なコードを取得します:

var scrollbarWidth = getScrollbarWidth();
var scrollTop = $(window).scrollTop();

// 禁用滚动条
$('body').addClass('noscroll').css({
  'top': -scrollTop + 'px',
  'padding-right': scrollbarWidth + 'px'
});

// 恢复滚动条
$('body').removeClass('noscroll').css({
  'padding-right': ''
});
$(window).scrollTop(scrollTop);


function getScrollbarWidth() {
  var outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);
  var widthNoScroll = outer.offsetWidth;
  // force scrollbars
  outer.style.overflow = 'scroll';
  // add innerdiv
  var inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);        
  var widthWithScroll = inner.offsetWidth;
  // remove divs
  outer.parentNode.removeChild(outer);
  return widthNoScroll - widthWithScroll;
};

ログイン後にコピー

上記は、jQuery を使用して、禁止ページスクロールの全ステップ。この方法を使用すると、Web ページの開発時にページのスクロールをより適切に制御し、予期しない状況を回避できます。

以上がjqueryページでページのスクロールが禁止されていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。