スクロールバーが表示されているかどうかを確認するにはどうすればよいですか? 質問する

スクロールバーが表示されているかどうかを確認するにはどうすればよいですか? 質問する

overflow:autodiv の を確認することは可能ですか?

例えば:

html

<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * content
</div>

クエリ

$('.my_class').live('hover', function (event)
{
    if (event.type == 'mouseenter')
    {
         if( ...  if scrollbar visible ? ... )
         {
            alert('true'):
         }
         else
         {
            alert('false'):
         }
    }

});

コンテンツは短い場合 (スクロールバーなし) もあれば、長い場合 (スクロールバーが表示される) もあります。

ベストアンサー1

そのための小さなプラグイン。

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

このように使います。

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

Firefox、Chrome、IE6、7、8で動作確認済み

bodyタグセレクターでは正しく動作しません

デモ


編集

水平スクロールバーがあると垂直スクロールバーが表示される場合、この機能は動作しないことがわかりました。

別の解決策を見つけました...clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;

おすすめ記事