时间戳

首页 > 解决方案 > 在每个滚动条上移动元素

javascript - 在每个滚动条上移动元素

问题描述

我正在尝试根据车轮增量值将“主”标记名向上或向下移动 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>

标签： javascripthtmljquerycss

解决方案

推荐阅读