1. ホーム
  2. javascript

[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする

2022-07-15 23:12:03

質問

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

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

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

が、スクロールバーもついているわけではありません(だから、実際に人間がスクロールできる)。

質問

でスクロールバーがあるかどうかを調べるにはどうしたらよいでしょうか。 1 クロスブラウザと 2 javascriptのみ(例えば 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のコードは、実際の解決策を提供していないにもかかわらず、私が問題を解決するのに非常に役立ちました。それは私を正しい方向へ導いてくれました。

どのように解決するのですか?

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

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

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

/* you'll get true/false */