Я пытаюсь переместить разделы вверх и вниз по событию колеса, изменив класс в предыдущих, inView и следующих разделах. поэтому каждое событие wheel будет изменять activeIndex и, следовательно, классы для каждого раздела. Также, когда окно загружается, начальный activeIndex = 0, так что он всегда начинается сверху. я хочу знать, верен ли мой подход? правильно ли добавлять класс в activeIndex и классы в разделы до и после, например:
Var previousSection = section[activeIndex - 1];
previousSection.classList.add("previous")
Var inViewSection = section[activeIndex];
inViewSection.classList.add("inView");
Var nextSection = section[activeIndex + 1];
nextSection.classList.add("next");
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
home, body {
margin: 0;
padding: 0;
overflow: hidden;
user-select: none;
}
section {
position: absolute;
left: 0;
width: 100vw;
height: 100vh;
transition: 1s ease-out;
}
.first {background-color:black;}
.second {background-color:red;}
.third {background-color:blue;}
.fourth {background-color:green;}
.fifth {background-color:yellow;}
.inView {top: 0;}
.previous {top: -100vh;}
.next {top: 100vh;}
</style>
<script>
window.load = function() {
var activeIndex = 0;
}
window.addEventListener("wheel", event => {
const delta = Math.sign(event.deltaY);
//console.info(delta);
if (delta > 0) {
nextSection();
}
else if (delta < 0) {
previousSection();
}
});
section: document.querySelectorAll(".section");
activeIndex: 0;
function nextService() {
if (activeIndex = sections.length) return;
let previousService = section[activeIndex - 1];
previousService.classList.add("previous");
let activeService = section[activeIndex];
activeService.classList.add("inView");
let nextService = section[activeIndex + 1];
nextService.classList.add("next");
activeIndex++;
//update the above variables
}
</script>
</head>
<body>
<section class="first section"></section>
<section class="second section"></section>
<sectionc class="third section"></sectionc>
<section class="fourth section"></section>
<section class="fifth section"></section>
</body>
</html>