1. ホーム
  2. javascript

[解決済み] ドキュメントの高さ変更の検出

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'
})
ライブデモ