HTML要素にスクロールバーがあるかどうかを確認する

要素にスクロールバーがあるかどうかを確認する最も速い方法は何ですか？

もちろん、要素がそのビューポートより大きいかどうかを確認することは、次の2つの値を確認することで簡単に実行できます。

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

しかし、それはそれが同様にスクロールバーを持っていることを意味しません（したがって、実際に人間がスクロールすることができます）。

質問

1つのクロスブラウザーで2つの JavaScriptのみ（jQueryがない場合と同様）でスクロールバーを確認するにはどうすればよいですか？

Javascriptのみ。非常に高速なjQueryセレクターフィルターを作成したいので、可能な限り小さなオーバーヘッドが必要です。

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

overflowスタイル設定を確認する必要があると思いますが、クロスブラウザーでそれを行うにはどうすればよいですか？

追加編集

overflowスタイル設定だけではありません。要素にスクロールバーがあるかどうかを確認することは、見かけほど簡単ではありません。上で書いた最初の式は、要素に境界線がない場合は正常に機能しますが、境界線がかなり広い場合（特に境界線の幅offsetが大きい場合）、寸法はscroll寸法より大きくなる場合がありますが、要素はスクロール可能です。offset要素の実際のスクロール可能なビューポートを取得し、それをscroll寸法と比較するには、実際に寸法から境界を差し引く必要があります。

今後の参考のために

:scrollablejQueryセレクターフィルターは私の.scrollintoview()jQueryプラグインに含まれています。誰かがそれを必要とするならば、完全なコードは私のブログ投稿にあります。実際の解決策は提供されていませんが、Soumyaのコードは問題の解決に大きく役立ちました。それは私を正しい方向に向けました。

私はこれを数週間前にどこかで見つけました。それは私のために働いた。

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

試してください：

垂直スクロールバーの場合

el.scrollHeight> el.clientHeight

水平スクロールバー用

el.scrollWidth> el.clientWidth

これはIE8とFirefox 3.6以降で少なくとも機能することを知っています。

これは見えるかもしれません（またはも）少しハックしていますが、テストすることができscrollTop、およびscrollLeftプロパティを。

それらが0より大きい場合、スクロールバーがあることがわかります。それらが0の場合、それらを1に設定し、もう一度テストして、1の結果が得られるかどうかを確認します。次に、それらを0に戻します。

例： http : //jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

IEには別のプロパティがあると思うので、すぐに更新します。

編集： IEがこのプロパティをサポートしているように見えます。（現在、IEをテストすることはできません。）

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

ここにさらに別の解決策があります：

少数の人々が指摘したように、offsetHeightとscrollHeightを比較するだけでは十分ではありません。オーバーフローが非表示になっているなど、まだスクロールバーがない要素が異なるためです。だから、ここでも要素の計算されたスタイルでオーバーフローがスクロールか自動かどうかをチェックしています：

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

パーティーに少し遅れるかもしれませんが...

e.offsetWidth対e.clientWidthでスクロールバーを検出できると思います。オフセット幅には、境界線とスクロールバー、パディングと幅が含まれます。クライアントの幅には、パディングと幅が含まれます。見てください：

https://developer.mozilla.org/en/DOM/element.offsetWidth（2番目の画像） https://developer.mozilla.org/en/DOM/element.clientWidth（2番目の画像）

以下を確認する必要があります。

1. 要素の計算/カスケード/現在のスタイルを使用して、要素のオーバーフローがauto / scroll（overflowX / Yを含む）に設定されているかどうか。
2. 要素のオーバーフローがauto / scrollに設定されている場合。offsetWidthとclientWidthを設定します。
3. clientWidthがoffsetWidth-右側の境界線（compute / cascaded / currentスタイルで再び見つかる）より小さい場合は、スクロールバーがあることがわかります。

バーティカル（offset / clientHeight）についても同じようにします。

IE7は一部の要素についてclientHeightを0と報告します（理由は確認していません）。したがって、常に最初のオーバーフローチェックが必要です。

お役に立てれば！

スクロールバーの存在を確認する場合、いくつかの問題があります。その1つは、Macには目に見えるスクロールバーがないため、上記の両方の解決策では正確な答えが得られないことです。

したがって、ブラウザのレンダリングはそれほど頻繁ではないので、スクロールを変更してから設定を元に戻すことができます。

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

（ここまでのところ）上記の解決策のどれもうまくいかなかったので、ここをいじってください。DivのscrollheightとそのoffsetHeightを比較することで、いくつかの成功を見つけました

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

それは私に正確な比較を与えているようです...これまでのところ。これが正当であるかどうか誰かが知っていますか？

以下のためにIE11（Internet Explorerの11）私はにロジックを変更する必要がありました：

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

これは、スクロールバーが存在しない場合、IEがscrollHeightをclientHeightより1大きいと報告し、スクロールバーが存在する場合、約9大きいと報告するためです。

Webページ全体にスクロールバーが存在するかどうか、および完全なブラウザーサポートがあるかどうかを知る必要がある場合は、次のように使用できます。

const hasScrollbar = document.body.scrollHeight > window.innerHeight

それは使用することが重要だwindow.innerHeight代わりのdocument.body.clientHeightため、一部のモバイルブラウザでclientHeightアドレスバーのサイズを取得することはありませんが、scrollHeightは、あなたが間違った計算を取得するので、意志。

この答えはどれも正しくありません。これを使用する必要があります：

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

その中に100％幅の要素を追加します。次に、オーバーフローを非表示に設定します。要素の計算されたスタイル（jQから）が変更された場合、親にはスクロールバーがありました。

編集：getComputedStyleのようなクロスブラウザーメソッドが必要なようです。試してください：

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}