Я пытаюсь оживить какой-то текст, когда они появятся. Все работает нормально, но когда я представляю pagepiling.js, моя функция для определения того, находятся ли мои элементы в представлении, возвращает false. Вот функция:
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while (el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
Любые идеи о том, что может быть неправильным?
Проверьте, как использовать обратные вызовы pagePiling.js для таких, как afterLoad
и onLeave
.
Вы также можете проверить доступный пример в папке examples
репозитория github.
Эта функция должна работать:
function isInView(el) {
let bb = el.getBoundingClientRect();
return bb.top <= window.innerHeight && bb.bottom >= 0
&& bb.left <= window.innerWidth && bb.right >= 0;
}
Вот демонстрация:
document.onscroll = function() {
document.querySelector('.status').textContent = isInView(document.querySelector('.element')) ? 'IN' : 'OUT';
}
function isInView(el) {
let bb = el.getBoundingClientRect();
return bb.top <= window.innerHeight && bb.bottom >= 0
&& bb.left <= window.innerWidth && bb.right >= 0;
}
.before,
.element,
.after {
height: 200vh;
background: wheat;
}
.element {
background: teal;
}
.status {
position: fixed;
top: 20px;
right: 20px;
padding: 1em;
background: silver;
}
<div class="before">Before</div>
<div class="element">Element</div>
<div class="after">After</div>
<div class="status">...</div>