jQueryを使用してDiv内のスクロールバーの可視性を検出するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-05 20:41:02
オリジナル
386 人が閲覧しました

How to Detect Scrollbar Visibility in a Div with jQuery?

jQuery を使用した Div 内のスクロールバーの可視性の検出

div 要素にアクティブなスクロールバーがあるかどうかを判断することは、Web 開発における一般的な要件です。これを実現する 1 つの方法は、div のオーバーフロー プロパティをチェックすることです。たとえば、div に overflow: auto がある場合、コンテンツが div のサイズを超えるとスクロールバーが表示されることを意味します。

jQuery を使用したオーバーフローのチェック

jQuery を使用した overflow プロパティでは、hasScrollBar プラグインを利用できます。以下に例を示します:

<code class="javascript">(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);</code>
ログイン後にコピー

このプラグインを使用するには、div 要素で hasScrollBar() を呼び出すだけです:

<code class="javascript">$('#my_div1').hasScrollBar(); // Returns true if there's a vertical scrollbar, false otherwise.</code>
ログイン後にコピー

このソリューションは、Firefox、Chrome、およびIE6、7、および 8。ただし、body タグでは正しく機能しません。

clientHeight を使用した代替解決策

場合によっては、特に水平方向の場合スクロールバーは垂直スクロールバーの表示をトリガーしますが、hasScrollBar 関数は期待どおりの結果を提供しない可能性があります。別のアプローチは、 clientHeight プロパティを使用することです:

return this.get(0).scrollHeight > this.get(0).clientHeight;
ログイン後にコピー

以上がjQueryを使用してDiv内のスクロールバーの可視性を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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