jQuery でページ スクロールを無効にしたり再度有効にしたりするにはどうすればよいですか?

jQuery でページ スクロールを無効にする方法

ページ スクロールの無効化は、オーバーフローの設定を含むさまざまな方法で実現できます。ボディ要素。ただし、jQuery を使用したより効果的で正確なアプローチがあります。

そのような方法の 1 つは、本文のスクロール イベントにバインドし、scrollTop/scrollLeft をキャプチャされた値にリセットすることです。この手法はほとんどのシナリオで機能しますが、ページ コンテンツがビューポートよりも大きい場合の特殊なケースには対応できない可能性があります。

より堅牢なソリューションとしては、次の jQuery コードの使用を検討してください:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

このコードは、overflow: hidden を設定し、フルハイトのページを確保することにより、HTML 要素と body 要素の両方でスクロールを完全に無効にします。

スクロールを復元するには、単純に逆にします。変更点:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

このアプローチは、ブラウザー間でより信頼性が高く一貫性があり、コンテンツがビューポートよりも大きい場合でもページがスクロールできない状態を維持します。

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