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

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

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 サイトの他の関連記事を参照してください。