私の目標は、要素がビューポートに表示される直前に要素を挿入することです (遅延データ属性に応じて、要素がビューポートに表示される前のデフォルトは 100px です)。そして、私がそれを行う方法は、getBoundingClientRect();
const LAZY_THRESHOLD_DEFAULT = 100;
TestBox.isOnScreen = function(element) {
const reservedDistance = parseInt(element.getAttribute(THRESHOLD) || LAZY_THRESHOLD_DEFAULT, 10);
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= $(window).height() &&
rect.right <= $(window).width()
}
そして、私はそれをこのように使用します
$(window).scroll(function() {
if (TestBox.isOnScreen(element)) {
// Inject the element
}
});
私が見つけた主なことの1つは、(コンソールログと$(window).scrollTop()
一緒にコンソールログを記録したときTestBox.isOnScreen(element)
:要素がビューポート上にあることが検出された瞬間は常に正確であるとは限りません.14px、5px、または正確に良い場合もあります.
誰もこの問題を経験したことがありますか? それとも私はそれを間違って実装していますか?