序文
最近では、改ページを行うには需要がある、少し低い音があります。だから私は物事を少し力低グリッドをするつもりです。
ページング自体は何もないが、数千人のようにアップされるデータの量。処理を指していない場合、それは非常にあなたのページを冷やすと推定され、マシンも非常にクールです。安心、私はあなたがとてもクールにさせません。
プログラムを表示するために、大量のデータ
もちろん、より多くの人気は、仮想スクロール（無限スクロール）です。
- 常に限られた固定ノードを示しています。
- スクロール外側の層を作成します。
要するに、データを表示するための固定ノードの繰り返しの使用です。
そのうち2点があります
あなたは、データの新しいページをロードする必要がある場合
- scrollTopスプライト、clientHeight、scrollHeight
- IntersectionObserver（クロム55+）
どのようにして、コンテナの変更の幅と高さを知っています
。この展開]の周りに紙を
使用して、フレームワークを使用して反応するので反応するウィンドウを、反応-ウィンドウは、大量のデータを反応させるコンポーネントのリストを表示するために使用されます。
プロジェクトが必要とするため、だけでなく、どこにもデータの行の次元の異なる数を表示しないように。確かに一部の人はwindow.resizeを聞いて、と言います。
はい、ある程度のサイズを変更するが、window.resize聞いて、とき、私はコンテナ自体の大きさを教えていない
コースはgetComputedStyleによって得ることができます。サイズを変更せずにウィンドウの場合。
私のサイズはリアルタイムの変化を知りたいと思いました。
寸法変化の監視プログラム
監視要素は、サイズを変更ここでいくつかのテストプログラムとソースコードがあります。
クロスブラウザ、イベントベース、要素のリサイズ検出
アイデア：
IEの場合、（この時点でああと同様に）直接登録さらにonResize
それ以外の場合：text / htmlでのオブジェクトの種類を作成します。
絶対的な高さを100％に設定された位置、幅の100％（この幅は、親コンテナの高さを得ることが可能です）
設定するポインタイベント：なし、とクリック浸透（フォームオブジェクトがゴーストになってみましょう）
高度に可変オブジェクト要素の後に、加入者に通知
イベントスロットリングのサイズを変更
問題：
- オブジェクト作成
- イベントハンドラは、要素自体に取り付けられました
javascriptの-検出要素サイズ変更
3つのつの子要素を作成し、変更を監視するには、スクロールイベントを使用します。
原理：
https://zhuanlan.zhihu.com/p/24887312
するATスクロールイベントでは、ドキュメントビューAN要素がスクロールされたか。発射され
た場合、文書をまたは転動体トリガスクロールイベントを表示します。
転動体がこのイベントをトリガするときですので、要素がロールバックされますとき？要素は、親要素親要素よりも大きくなると、それはロールバックすることができた場合、要素がスクロールすることができます。
言い換えれば、転動体は、このアプローチの中核である一貫性のない親子の要素の大きさを意味することができます。
スクロールイベントトリガーscrollLeftまたはscrollTopスプライトの変更は、さらにそのサイズが変更されたことを知らされたことを、私たちは、要素のサイズを変更する必要がある場合。
可視性：隠された;不透明度：0;位置：絶対;自分が無になることを許可
キャプチャ段階のインターセプトイベントでは、addEventListener（真、scrollListenerを「スクロール」）、偽無効の使用
div.expandトリガに大きいです
div.expandトリガ小さいです
ディスプレイ、例えばstyle.display =「なし」とstyle.display =「ブロック」を監視するanimationstart
問題：
- 4つの追加要素ノードとノードのスタイルを作成します。
- イベントは、body要素自体をマウントし、
ResizeObserver
ネイティブの実施例を来て、互換性が高くない、リサイズポリフィル-Observer-ベースポリフィルは、サイズを変更し、MutationOberverはResizeObserverを達成しました。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log(entry.target.id, `height:${entry.contentRect.height} width:${entry.contentRect.width}`);
}
});
resizeObserver.observe(document.querySelector('#my_element'));
resizeObserver.observe(document.querySelector('#my_element2'));又
もちろん、私も考えて
- タイマー+ getComputedStyleも非常に低コストを実現しています。
- + MutationOberverも非常にシンプルなソリューションであるサイズを変更。