7

最新のブラウザでレイアウトの変更をリッスンするためのテクニックは何ですか? window.resizeコンテンツの変更がリフローを引き起こしたときではなく、ウィンドウ全体のサイズが変更されたときにのみ起動するため、機能しません。

具体的には、次の場合にお知らせください。

  • 要素の使用可能な幅が変わります。
  • 要素のインフローの子によって消費される合計の高さが変化します。
4

2 に答える 2

8

このためにフックするネイティブ イベントはありません。タイマーを設定し、独自のコードでこの要素のサイズをポーリングする必要があります。

基本バージョンはこちら。100ms ごとにポーリングします。子供の身長をどのように確認したいのかわかりません。これは、ラッパーを高くするだけだと仮定しています。

var origHeight = 0;
var origWidth = 0;
var timer1;

function testSize() {
     var $target = $('#target')     
     if(origHeight==0) {
         origWidth = $target.outerWidth();
         origHeight = $target.outerHeight();

     }
     else {
         if(origWidth != $target.outerWidth() || origHeight = $target.outerHeight()) {
             alert("change");  
         }
         origWidth = $target.outerWidth();
         origHeight = $target.outerHeight();
         timer1= window.setTimeout(function(){ testSize() }),100)
     } 

}
于 2012-11-13T15:10:45.673 に答える
2

同様の質問How to know when an DOM element move or is resizedから、これを行う Ben Almanの jQuery プラグインがあります。このプラグインは、Diodeus の回答で概説されているのと同じポーリング アプローチを使用します。

プラグイン ページの例:

// Well, try this on for size!
$("#unicorns").resize(function(e){
  // do something when #unicorns element resizes
});
于 2012-11-21T03:18:26.970 に答える