Я пытаюсь переместить «основной» тэг на 100vh вверх или вниз в зависимости от направления колеса. мой подход к достижению этого? строка кода sections.container.style.top = "-" sections.activeIndex * 100 + "vh"; правильная, чтобы изменить стиль сверху на -100vh каждый раз при прокрутке. Что я должен сделать, чтобы обновить section.container.style.top при каждом срабатывании события.
<!DOCTYPE html>
<html lang="english">
<head>
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: auto;
user-select: none;
}
main > section {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
}
main > section:nth-child(1) {
top: 0;
background-color: black;
}
main > section:nth-child(2) {
top: 100vh;
background-color: springgreen;
}
main > section:nth-child(3) {
top: 200vh;
background-color: firebrick;
}
main > section:nth-child(4) {
top: 300vh;
background-color: darkcyan;
}
main > section:nth-child(5) {
top: 400vh;
background-color: deeppink;
}
#footer {
position: absolute;
top: 33vh;
right: 0;
left: 0;
width: 100%;
height: 67vh;
background-color: black;
z-index: -1;
}
#call-to-action-footer {
position: absolute;
top: -16vh;
left: 16vh;
right: 16vh;
width: auto;
height: 50vh;
background-color: red;
}
</style>
<script>
window.addEventListener(
"wheel",
function (event) {
var direction = event.deltaY;
if (direction > 0) {
nextSection();
} else {
previousSection();
}
},
{ passive: false }
);
const sections = {
container = document.querySelector("main"),
descendants = document.querySelectorAll("section"),
activeIndex = 0,
}
function nextSection() {
if (sections.activeIndex + 1 >= sections.descendants.length) return;
sections.container.style.top = sections.activeIndex * 100 + "vh";
sections.activeIndex++;
}
function previousSection() {
if (sections.activeIndex = 0) return;
sections.container.style.top = "-" sections.activeIndex * 100 + "vh";
sections.activeIndex++;
}
</script>
</head>
<body>
<main>
<section id="first-section" class="sections"></section>
<section id="services"></section>
<section id="about-us"></section>
<section id="ecommerce"></section>
<section id="testimonials"></section>
</main>
<footer id="footer">
<div id="call-to-action-footer"></div>
</footer>
</body>
</html>