Я пытаюсь переместить «основной» тэг на 100 окон просмотра вверх или вниз в соответствии со значением дельты колеса, чтобы изменить сечение внутри окна. А также способ остановить или начать выполнение кода, когда он указан, но я не могу понять, какой должна быть функция для его правильного выполнения.
window.addEventListener("wheel", event => {
const delta = Math.sign(event.deltaY);
//console.info(delta);
if (delta > 0) {
nextSection();
} else if (delta < 0) {
previousSection();
}
let main = document.querySelector("main");
var mainTop = main.style.top
function nextSection() {
console.log("next-section");
let sections = document.querySelectorAll("section");
let mainTop = "0";
function countP() {
mainTop += 100;
main.style.top = mainTop;
}
}
function previousSection() {
console.log("previous-section");
}
});
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
user-select: none;
}
main {
position: absolute;
top: 0;
right: 0;
left: 0;
}
main>section {
position: absolute;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
}
#first-section {
top: 0;
background-color: black;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#services {
top: 100vh;
background-color: transparent;
}
#about-us {
top: 200vh;
background-color: yellow;
}
#ecommerce {
top: 300vh;
background-color: darkcyan;
}
#testimonials {
top: 400vh;
background-color: deeppink;
}
#footer {
position: absolute;
top: 33vh;
right: 0;
left: 0;
width: 100%;
height: 67vh;
background-color: black;
z-index: -1;
}
<!DOCTYPE html>
<html lang="english">
<head>
<title></title>
</head>
<body>
<main>
<section id="first-section"></section>
<section id="services"></section>
<section id="about-us"></section>
<section id="ecommerce"></section>
<section id="testimonials"></section>
</main>
<footer id="footer"></footer>
</body>
</html>