[解決済み] ドキュメントの高さ変更の検出
2023-05-08 10:06:23
質問
を検出しようとしています。
document
の高さが変わるのを検出しようとしています。 一旦それが起こると、私はページレイアウトを整理するのに役立ついくつかの関数を実行する必要があります。
私が探しているのは
window.onresize
. ウィンドウより大きなドキュメント全体が必要なのです。
この変化をどのように観察すればよいのでしょうか。
どのように解決するのですか?
更新(2020年10月)しました。
リサイズオブザーバ は素晴らしい API です ( サポートテーブル )
// create an Observer instance
const resizeObserver = new ResizeObserver(entries =>
console.log('Body height changed:', entries[0].target.clientHeight)
)
// start observing a DOM node
resizeObserver.observe(document.body)
// click anywhere to rnadomize height
window.addEventListener('click', () =>
document.body.style.height = Math.floor((Math.random() * 5000) + 1) + 'px'
)
click anywhere to change the height
古い回答です。
hack"ですが、この単純な関数は継続的に要素の高さの変更に(setTimeoutを通して)耳を傾け、変更が検出されたときにコールバックを発生させます。
要素の高さの変化を考慮することは重要です。 高さ は、ユーザーの操作に関係なく変化する可能性があることを考慮することが重要です ( リサイズ , クリック など)であり、何が原因で高さが変わるのかが分からないため、100%の検出を絶対に保証するためには、インターバル高さチェッカーを設置するしかないのです :
function onElementHeightChange(elm, callback) {
var lastHeight = elm.clientHeight, newHeight;
(function run() {
newHeight = elm.clientHeight;
if (lastHeight != newHeight)
callback(newHeight)
lastHeight = newHeight
if (elm.onElementHeightChangeTimer)
clearTimeout(elm.onElementHeightChangeTimer)
elm.onElementHeightChangeTimer = setTimeout(run, 200)
})()
}
// to clear the timer use:
// clearTimeout(document.body.onElementHeightChangeTimer);
// DEMO:
document.write("click anywhere to change the height")
onElementHeightChange(document.body, function(h) {
console.log('Body height changed:', h)
})
window.addEventListener('click', function() {
document.body.style.height = Math.floor((Math.random() * 5000) + 1) + 'px'
})
関連
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] window.onload vs $(document).ready()
-
[解決済み】jQueryを使用してページのスクロール位置を検出する方法
-
[解決済み】Javascriptでスクロールバーの位置を取得する方法は?
-
[解決済み] ブラウザがファイルのダウンロードを受信したことを検出する
-
[解決済み] jQueryの$という記号の意味は何ですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] DIVのディメンションが変更されたことを検出する方法は?
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行