web-dev-qa-db-ja.com

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

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

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

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

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

質問

1クロスブラウザと2javascriptでスクロールバーを確認するにはどうすればよいですかのみ（no jQuery）のように？

非常に高速なjQueryセレクターフィルターを作成したいので、Javascriptのみ。

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

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

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

追加編集

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

将来の参考のために

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

javascriptdomscrollbaroverflow
97
Robert Koritnik

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

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

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

/* you'll get true/false */
93
jzhinga

試してください：

垂直スクロールバー用

el.scrollHeight> el.clientHeight

水平スクロールバー用

el.scrollWidth> el.clientWidth

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

16
Gary

さらに別のソリューションを次に示します。

少数の人々が指摘したように、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,
  };
}
14
lotif

これは少し（またはbe）と思われるかもしれませんが、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には別のプロパティがあると思うので、すぐに更新します。

EDIT：IEはこのプロパティをサポートしている可能性があります。テストできませんIE今。）

http://msdn.Microsoft.com/en-us/library/ms534618（VS.85）.aspx

14
user113716

私はパーティーに少し遅れたかもしれませんが、...

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

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

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

  1. 計算/カスケード/現在のスタイルを使用して、要素のオーバーフローが自動/スクロール（overflowX/Yを含む）に設定されているかどうか。
  2. 要素のオーバーフローが自動/スクロールに設定されている場合。 offsetWidthとclientWidthを確立します。
  3. ClientWidthがoffsetWidth-右境界線（計算/カスケード/現在のスタイルで再度検出）より小さい場合、スクロールバーがあることがわかります。

垂直（offset/clientHeight）についても同じことを行います。

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

お役に立てれば！

6
user140628

スクロールバーの存在を確認する場合、いくつかの問題があります。その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;
};
2
hakobpogh

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

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

今のところ正確な比較ができるようです...これが合法かどうか誰か知っていますか？

1
Michael

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大きいと報告するためです。

0
danday74