refining intersection observer position for chapterIndexIndicator

This commit is contained in:
Antoine M 2023-09-28 13:09:52 +02:00
parent d90462e64b
commit 6e8dacf4ff
2 changed files with 22 additions and 15 deletions

View File

@ -262,7 +262,7 @@
}); });
const io = new IntersectionObserver((entries) => { const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.intersectionRatio > 0) { if (entry.isIntersecting) {
entry.target.classList.add("active"); entry.target.classList.add("active");
const blockId = entry.target.getAttribute("id"); const blockId = entry.target.getAttribute("id");
const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`); const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
@ -270,6 +270,8 @@
} else { } else {
} }
}); });
}, {
rootMargin: "-10% 0px -70% 0px"
}); });
const questionsContainerBlocks = document.querySelectorAll(".questions-container-block"); const questionsContainerBlocks = document.querySelectorAll(".questions-container-block");
const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary"); const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary");

View File

@ -43,9 +43,10 @@ export default function singleConseil() {
}); });
// Register IntersectionObserver // Register IntersectionObserver
const io = new IntersectionObserver((entries) => { const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.intersectionRatio > 0) { if (entry.isIntersecting) {
// Add 'active' class if observation target is inside viewport // Add 'active' class if observation target is inside viewport
entry.target.classList.add('active'); entry.target.classList.add('active');
const blockId = entry.target.getAttribute('id'); const blockId = entry.target.getAttribute('id');
@ -56,7 +57,11 @@ export default function singleConseil() {
// entry.target.classList.remove('active'); // entry.target.classList.remove('active');
} }
}); });
}); },
{
rootMargin: '-10% 0px -70% 0px',
}
);
const questionsContainerBlocks = document.querySelectorAll('.questions-container-block'); const questionsContainerBlocks = document.querySelectorAll('.questions-container-block');
const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary'); const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock]; const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];