要素の高さに関連するプロパティ

きっかけ

無限スクロールを実施する場合、他のデータをロードする時点は、最後のコンテンツが終了する時点でなければなりません.
無限スクロールを実現し、
ドキュメントの合計高さから現在のビューの高さを差し引いた値とスクロールの高さを比較することで、ドキュメントの最後の高さを判断します.

使用するコード:

const {scrollHeight,clientHeight,scrollTop} = document.documentElement;
const degree = scrollTop / (scrollHeight-clientHeight);

if ( degree == 1 ) { ... }

あるいは

const {scrollHeight,clientHeight,scrollTop} = document.documentElement;
if ( clientHeight + scrollTop === scrollHeight ) { ... } 

質問です。

無限スクロール機能を使用したモバイル環境では、PCよりもページズームを頻繁に使用しています.
しかし、ページが縮小するにつれて、ドキュメントの末尾に達しても.clientHeight + scrollTopとscrollHeightが一致しないという問題が発生した.
そのため、様々なサイズやスクロールに関する値を整理する必要があると思います.

いろいろなサイズの装飾

コメントブログ

client~element.clinetHeightおよびelement.clientWidthダウンジャケットを含むサイズを入力します.
ビューア、スクロールバー以外の実際の内部コンテンツが占めるサイズ.

offset~element.offsetHeightおよびelement.offsetWidthダウンジャケット、ボーリングベッド、スクロールバーなどの寸法を取得します.
画面にエンティティが占めるサイズが表示されます.

scroll~element.scrollHeightおよびelement.scrollWidth画面上の領域を考慮せずに、実際のエンティティのサイズを取得します.
現在表示されていないスクロールバーが非表示になっている領域のサイズが含まれます.

要素のスクロール度合い

scrollTopelement.scrollTopで、一番上からどれだけ転がっているかがわかります.
ドキュメントの上部から現在のビューまでの距離なので、下図のスクロールと同じ高さです.

scrollLeftelement.scrollLeftは一番左に何回転がっていますか.

問題を解決する

次に、スケールが正しい値を与えていない理由を見てみましょう.
拡大または縮小すると、以前に表示したサイズが変わります.
拡大すると、大きく見えるのではなく、見える領域が減少します.clientHeightとスクロール単位が減少します.
同じスクロールでも、より小さな部分がチェックされるため、スクロールの単位が小さくなります.
このため、最後までスクロールすると小数点レベルの誤差が発生します.
しかし、scrollTop + clientHeight対scrollHeight大きな場合にのみ発生するため、以下の条件を変更しました.

if ( scrollTop + clientHeight >= scrollHeight ) {...}