Прокручивание страницы по блокам
В общем, есть идея создать сайт, состоящий из нескольких блоков высотой во всю ширину экрана. И чтобы прокрутка страницы была от одного блока к другому. Если мы, условно, в начале страницы и хотим проскролить вниз, то страница автоматически перейдёт к следующему блоку. Вверх по тому же принципу. Много разных вариантов перепробовал, в частности: использовал массив с контейнерами, к которым нужно прокрутить, а также отслеживал нынешний элемент в связке с scrollIntoView; использовал IntersectionObserver (chatGPT посоветовал). В общем, все варианты были рабочими, НО лишь в firefox :) Как бы я не старался, но не получается заставить всё это работать в chrome, vivaldi и, наверняка, в других браузерах. Только в firefox. В чём может быть причина? Куда копать? Вот последний из реализованных вариантов: (в firefox работает, а в хроме медленно скролит либо вверх, либо вниз. по пикселю)
const containerElements = document.querySelectorAll(".container__element");
let prevScrollPos = window.pageYOffset;
let currentElement = 0;
document.addEventListener('scroll', scrollListener);
function scrollListener(e) {
let currentScrollPos = window.pageYOffset;
const direction = currentScrollPos > prevScrollPos ? "down" : "up";
console.log(direction);
if (direction == 'down') {
if (currentElement + 1 < containerElements.length) {
currentElement++;
}
}
else {
if (currentElement - 1 >= 0) {
currentElement--;
}
}
let elementHeight = getAbsoluteHeight(containerElements[currentElement]);
console.log(currentElement, elementHeight);
let absolutePositionOnPage = elementHeight * currentElement;
window.scrollTo({
top: absolutePositionOnPage,
behavior: "smooth"
});
prevScrollPos = currentScrollPos;
}
function getAbsoluteHeight(el) {
if (!el) {
return 0;
}
let styles = window.getComputedStyle(el);
let margin = parseFloat(styles['marginTop']) +
parseFloat(styles['marginBottom']);
return Math.ceil(el.offsetHeight + margin);
}