ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery を使用したページ スクロールをプログラムでより効果的に無効にするにはどうすればよいですか?

jQuery を使用したページ スクロールをプログラムでより効果的に無効にするにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-19 20:02:10
オリジナル
372 人が閲覧しました

How Can I Programmatically Disable Page Scrolling with jQuery More Effectively?

jQuery を使用したプログラムによるページ スクロールの無効化: 代替アプローチ

ページ本文のスクロールを無効にするために、最初に overflow: hidden for を設定することを提案しました。本文を取得し、現在のスクロール位置を取得し、スクロール イベントでそれをリセットします。あなたのアイデアは機能するかもしれませんが、これは最も効率的またはシームレスな方法ではありません。

より良いアプローチは、html 要素と body 要素の両方で overflow プロパティを利用し、スクロールが無効になっていることを確認することです。ページ全体に対して。変更された jQuery コードは次のとおりです。

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});
ログイン後にコピー

このコードは、オーバーフロー プロパティを非表示に設定し、ページがどの方向にもスクロールできないようにします。また、潜在的な垂直方向のギャップを避けるために、高さを 100% に設定します。

スクロールを復元するには、次の値を元に戻すだけです:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});
ログイン後にコピー

このメソッドはテストされ、次の環境で効果的に機能することが確認されています。 Firefox と Chrome ブラウザの両方。位置: 固定アプローチには独自の利点がありますが、特定のユースケースには適していない可能性があります。したがって、この代替ソリューションは、jQuery を使用してプログラムでページのスクロールを無効にする包括的な方法を提供します。

以上がjQuery を使用したページ スクロールをプログラムでより効果的に無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート