web-dev-qa-db-ja.com

jQueryを使用してDIV内のスクロールバーの存在を検出しますか？

JQueryを使用してDIV内のスクロールバーの存在を検出したいと思います。 $('div').scrollTop()を使用することを考えていましたが、スクロールバーが上部にある場合と、スクロールバーがまったくない場合の両方で、0が返されます。

アイデアはありますか？

javascriptjqueryscrollbar
22
7wp

Divのoverflowがautoであると仮定します。

var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;
47
bobince
// plugtrade.com - jQuery detect vertical scrollbar function //
(function($) {
    $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;
    }
})(jQuery);

例：

if($('#mydiv').has_scrollbar()) { /* do something */ }
18
PlugTrade.com

さて、私は次のことを行うことで解決策を見つけることになりました：

DIVで大きくなるコンテンツをラップし、wrapperDivの高さとcontainerDivの高さを比較することで（垂直）スクロールバーが存在するかどうかを検出します（通常、スクロールバーがある場合コンテンツが大きすぎます）。

wrapperDivの高さがcontainerDivの高さよりも大きい場合はスクロールバーがあり、小さい場合はスクロールバーはありません。

<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;">
    <DIV id="wrapperDiv">
        .... content here...
    </DIV>
</DIV>
0
7wp

あなたがjQueryを求めているので、私は上記のbobinceを修正します

var div= $('#something');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;

これは、scrollHeightとscrollWidthがDOMプロパティであるためです。

0
Musikero31