DIV 要素に表示可能なスクロールバーがあるかどうかを確認するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-05 09:42:02
オリジナル
379 人が閲覧しました

How to Determine if a DIV Element Has a Visible Scrollbar?

スクロールバーの表示/非表示の決定

Q: DIV の自動オーバーフローのチェック

DIV 要素にそのオーバーフロー プロパティは auto に設定されています?

例:

<code class="html"><div id="my_div" style="width: 100px; height: 100px; overflow:auto;" class="my_class">
  * content
</div></code>
ログイン後にコピー

提供された JavaScript コード スニペットでは、次のコマンドを使用して DIV 内にスクロールバーが表示されているかどうかを確認します。マウスホバー時のクラス「my_class」。

A: カスタム jQuery プラグインの利用

この機能を実現するには、カスタム jQuery プラグインを使用できます。

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

次のように使用できます:

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

このメソッドは Firefox、Chrome、IE6 ~ 8 でテストされています。

注: このプラグインは、body タグ セレクターでは正しく動作しない可能性があります。

水平スクロールバーの代替解決策:

水平スクロールバーによって垂直スクロールバーが表示される場合、次のことができます。この代替方法を使用してください:

<code class="javascript">return this.get(0).scrollHeight > this.get(0).clientHeight;</code>
ログイン後にコピー

以上がDIV 要素に表示可能なスクロールバーがあるかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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