[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
質問
要素にスクロールバーがあるかどうかを確認する最も早い方法は何ですか?
もちろん、要素がビューポートより大きいかどうかを確認することが一つですが、この二つの値を確認することで簡単に行うことができます。
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 */
関連
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] idによる要素の削除
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み] 料金制限のあるAPIを独自にDogfoodする
-
[解決済み] React.jsでテキスト入力のchange/focusOutイベントを正しくキャッチする方法とは?
-
[解決済み] 特定のクラスを持たない要素を選択する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] <noscript> の反対語のHTMLはありますか?
-
[解決済み] Angular 2 パスが存在しない場合に404や他のパスにリダイレクトする方法 [重複]について
-
[解決済み] event.targetを使用して、要素の親要素をターゲットにすることができますか?
-
[解決済み] SVG のテキスト要素の幅を取得する
-
[解決済み] JavaScript 配列 中括弧と大括弧
-
[解決済み] ネストしたオブジェクトのプロパティを動的に設定する
-
[解決済み] Angularで、配列内のオブジェクトを検索したい。