Сообщение от рони
|
Nlk,
может сделать рефакторинг, вернутся к минимальному макету и сформулировать задачу по новой, возможно дверь где-то рядом.
|
Спасибо.
Ребята, подскажите пожалуйста. Очень долго уже ломаю голову)
Проблема данного кода в том, что в некоторых браузерах, при единождом 'скроле' страницы, происходит сразу несколько событий. Поясню, в приведённом ниже коде при прокручивании страницы, должен активироваться последующийся блок кораллового цвета. Но в некоторых браузерах, при первом же 'скроле', у нас сразу активируется последний блок. По причине того, что за один 'скрол', класс .active успевает назначиться сразу всем последующим блокам, и остановиться на последнем.
<!DOCTYPE html><head><meta charset="UTF-8"><style>
body {min-height: 200vh;}
.page {height: 25vh; width: 100%; background: gray; border: 2px solid white;}
.active {background: coral;}
</style></head><body>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
<script>'use strict';
window.addEventListener("DOMContentLoaded", function() {
document.addEventListener("scroll", eventScroll);
const pages = document.querySelectorAll(".page");
let lastScrolled = 0;
function showPage() {
[].forEach.call(pages, function(el, i) {
i == pageIndex ? el.classList.add("active") : el.classList.remove("active");
});
}
let pageIndex = 0;
showPage();
function eventScroll() {
let scrolled = window.pageYOffset || document.documentElement.scrollTop;
if (scrolled < lastScrolled) {
--pageIndex;
} else {
++pageIndex;
};
pageIndex < 0 && (pageIndex = 0);
pageIndex > pages.length - 1 && (pageIndex = pages.length - 1);
showPage();
lastScrolled = scrolled;
}
});
</script></body></html>