[解決済み] HTML要素のコンテンツがオーバーフローしているかどうかを判定する
2022-04-28 15:57:16
質問
JavaScriptを使用して、HTML要素の内容がオーバーフローしているかどうかを(スクロールバーに関係なく)確認することは可能ですか?例えば、長い div でサイズが小さく固定されており、overflow プロパティが visible に設定され、要素にスクロールバーがない場合です。
解決方法は?
通常は
client[Height|Width]
と
scroll[Height|Width]
を検出するために、...しかし、オーバーフローが見えると、値は同じになります。ですから、検出ルーチンはこのことを考慮しなければなりません。
// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
FF3, FF40.0.2, IE6, Chrome 0.2.149.30 でテストしています。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
Vueの「データを聴く」原則を解説
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
JavaScriptのgetElementById()メソッド入門
-
jq は html ページとデータを動的に分割する。
-
[解決済み】HTMLのtext-overflowの省略記号の検出