ホームページ > 記事 > ウェブフロントエンド > jqueryページでページのスクロールが禁止されています
jqueryページでページのスクロールが禁止されています
- WBOYオリジナル
- 2023-05-14 09:58:371868ブラウズ
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 サイトの他の関連記事を参照してください。