add class to body when observes done
This commit is contained in:
parent
b9bcde8dd9
commit
ce2e5b121b
|
@ -1,7 +1,19 @@
|
||||||
(function() {
|
(function() {
|
||||||
|
const observeSelector = '.js-onscreen';
|
||||||
|
const observedNodes = document.querySelectorAll(observeSelector);
|
||||||
|
let observedCount = 0;
|
||||||
|
let observedTotal = !!observeSelector ? observedNodes.length : 0;
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', event => {
|
window.addEventListener('DOMContentLoaded', event => {
|
||||||
const intersectionSupport = !!window.IntersectionObserver;
|
const intersectionSupport = !!window.IntersectionObserver;
|
||||||
|
|
||||||
|
function updateObservedCount() {
|
||||||
|
observedCount++;
|
||||||
|
if (observedCount >= observedTotal) {
|
||||||
|
document.body.classList.add('observe-done');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onScreenHandler(entries) {
|
function onScreenHandler(entries) {
|
||||||
entries.forEach(entry => {
|
entries.forEach(entry => {
|
||||||
if (entry.intersectionRatio > 0) {
|
if (entry.intersectionRatio > 0) {
|
||||||
|
@ -12,7 +24,7 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelectorAll('.js-onscreen').forEach(el => {
|
observedNodes.forEach(el => {
|
||||||
if (intersectionSupport) {
|
if (intersectionSupport) {
|
||||||
const options = {
|
const options = {
|
||||||
rootMargin: '0px',
|
rootMargin: '0px',
|
||||||
|
@ -22,6 +34,7 @@
|
||||||
observer.observe(el);
|
observer.observe(el);
|
||||||
el.classList.add('is-observed');
|
el.classList.add('is-observed');
|
||||||
}
|
}
|
||||||
|
updateObservedCount();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in New Issue