要素にスクロールバーがあるかどうかを確認する最も速い方法は何ですか?
一つはもちろん、要素がビューポートより大きいかどうかをチェックすることですが、これはこの2つの値をチェックすることで簡単に行えます。
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth
しかし、それはスクロールバーがある(人間が実際にスクロールできる)ことを意味するものではありません。
どのように私は1クロスブラウザと2 javascriptのみ(のようにjQuery *なし)の方法でスクロールバーをチェックするのですか?
Javascriptのみ、なぜならできるだけオーバーヘッドを小さくする必要があるからです。
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")
Overflow`のスタイル設定をチェックする必要があると思いますが、クロスブラウザでそれを行うにはどうしたらよいでしょうか?
オーバーフローのスタイル設定だけではありません。要素にスクロールバーがあるかどうかのチェックは、見た目ほど些細なことではありません。しかし、ボーダーがある場合(特にボーダーがかなりの幅の場合)、
offset寸法が
scroll寸法より大きくても、要素はスクロール可能な場合があるのです。実際には、要素の実際のスクロール可能なビューポートを得るために、
offset寸法からボーダーを引いて、それを
scroll` 寸法と比較する必要があります。
jQuery セレクタフィルタ :scrollable
は、私の .scrollintoview()
jQuery プラグインに含まれています。完全なコードは私の ブログ記事 で見ることができるので、必要な方はご覧ください。Soumyaのコードは、実際の解決策を提供していないにもかかわらず、私が問題を解決するのに非常に役立ちました。それは、私に正しい方向を示してくれました。
これは少しハックしているように見えるかもしれませんが、scrollTop
と scrollLeft
のプロパティをテストすることができます。
もしそれらが0より大きければ、スクロールバーがあることが分かります。もし0なら、それらを1にセットして、もう一度テストして、結果が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 用には別のプロパティがあると思いますので、そちらをすぐに更新します</s>。
EDIT: IEがこのプロパティをサポートしている可能性があるようです。(今IEをテストできません。)
http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx
その中に100%ワイドの要素を追加します。そして、overflowをhiddenに設定する。要素'の計算スタイル(jQから)が変更されると、親にスクロールバーがあったことになる。
EDIT: _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];
}