1. ホーム
  2. ジャバスクリプト

[解決済み】スクロールバーが表示されているかどうかを確認するにはどうしたらいいですか?

2022-03-28 18:47:47

質問

を確認することは可能でしょうか? overflow:auto を使用することができますか?

例えば

HTML

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

JQUERY

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

});

コンテンツが短い(スクロールバーがない)ときと長い(スクロールバーが見える)ときがある。

解決方法は?

プラグインで対応可能です。

(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;