滚动点/使用window.pageYOffset溢出y破坏javascript函数

Question

我有一个使用JS的页面-特别是window.pageYOffset-和HTML数据来更改h1页脚的内部HTML，使用l1链接将页面滚动到每个部分，并在每个li添加类我到达每个section.work-page的顶部。

但是，在实现CSS滚动点并将div.container添加到可滚动部分之后，我的JavaScript停止了工作。具体来说，当我设置溢出-y时：滚动。

基本上，当我使div.container溢出-y时：滚动； doWork函数停止工作，我不知道为什么。

^^^^ CSS中的div.container

const doWork = function () {


const p01Tag = document.getElementById("p01")
const p02Tag = document.getElementById("p02")
const p03Tag = document.getElementById("p03")
const p04Tag = document.getElementById("p04")
const container = document.querySelector("div.container")

  const sections = document.querySelectorAll("section.work-page")
  const clientTag = document.querySelector("h2.about")



  document.addEventListener("scroll", function () {
    const pixels = window.pageYOffset
      console.log(pixels)

    sections.forEach(section => {
      if(section.offsetTop - 400 <= pixels) {
        clientTag.innerHTML = section.getAttribute("data-client")

        if (section.hasAttribute("data-seen-1")) {
        p01Tag.classList.add("move")
      } else {
        p01Tag.classList.remove("move")
      }

        if (section.hasAttribute("data-seen-2")) {
        p02Tag.classList.add("move")
      } else {
        p02Tag.classList.remove("move")
      }

      if (section.hasAttribute("data-seen-3")) {
      p03Tag.classList.add("move")
    } else {
      p03Tag.classList.remove("move")
    }

    if (section.hasAttribute("data-seen-4")) {
    p04Tag.classList.add("move")
  } else {
    p04Tag.classList.remove("move")
  }

      }
    })

  })


// scrolling between projects ============================

function smoothScroll(target, duration) {
  const targetTag = document.querySelector(target);
  let targetPosition = targetTag.getBoundingClientRect().top;
  const startPosition = window.pageYOffset;
  let startTime = null;

  function animation(currentTime) {
    if(startTime === null ) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, startPosition, targetPosition, duration);
    window.scrollTo(0,run);
    if (timeElapsed < duration) requestAnimationFrame(animation)
  }

function ease(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t + b;
  t--;
  return -c / 2 * (t * (t - 2) - 1) + b;
}

  requestAnimationFrame(animation)
}

p01Tag.addEventListener("click", function() {
  smoothScroll('section.fn-up', 800)
})

p02Tag.addEventListener("click", function() {
  smoothScroll('section.cameron', 800)
})

p03Tag.addEventListener("click", function() {
  smoothScroll('section.truax', 800)
})

p04Tag.addEventListener("click", function() {
  smoothScroll('section.romero', 800)
})


}

doWork()

const doInfo = function () {
  const toggleTag = document.querySelector("a.contact")
  const sectionTag = document.querySelector("section.info-page")

  toggleTag.addEventListener("click", function () {
    sectionTag.classList.toggle("open")

    if (sectionTag.classList.contains("open")) {
      toggleTag.innerHTML = "Close"
    } else {
      toggleTag.innerHTML = "Info"
    }
  })
}

doInfo()

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }


body {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  background-color: #050505;
  color: #ffffff;
  line-height: 1.1;
}


header {
  width: 100%;
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
}

.contact {
  float: right;
}

ul {
  font-family: 'IBM Plex Mono', Arial;
  font-size: 14px;
}


p {
  margin-bottom: 50px;
}

/* Info page -------------------- */
section.info-page {
  z-index: 2;
  position: fixed;
  top: -100vh;
  left: 0;
  display: flex;
  margin-top: 100px;
  margin-left: 40px;
  margin-right: 40px;
  width: 100vw;
  min-height: 100vh;
  max-width: 100vw;

  transition: top 0.5s;
}

section.info-page.open {
top: 0;
}

/* Work page ------------------------*/
div.container {
  top: 0;
  left: 0;
  max-width: 100vw;
  max-height: 100vh;
  /* WHEN WE ADD THIS OVERFLOW SETTING IN ORDER TO GET THE CSS SCROLL SNAP POINTS TO WORK IT BREAKS THE JAVASCRIPT */
 /* overflow-y: scroll; */
  scroll-snap-type: y mandatory;
  position: relative;
  z-index: 1;
}

div.work-info {
  width: 13vw;
  top: 0;
  left: 0;
  height: 100vh;
  position: fixed;
  z-index: 2;
  padding-right: 80px;
  display: flex;
  align-items: center;
  margin-left: 40px;
}

div.work-info li {
  padding-bottom: 30px;
  transition: transform 0.3s;
}

div.work-info li.move {
  transform: translateX(15px);
}

footer {
  width: 100%;
  z-index: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
  color: #979797;
}

section.work-page {
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;

}


section.work-page img {
  max-width: 60vw;
}

<body>
<!-- hidden modal that runs off of the info.js script -->
  <section class="info-page">
   <h1>
    Hello
   </h1>
</section>

  <header>
  <a class="contact" href="#">Info</a>
  </header>
  
  <!-- objects that get new classes with javascript on pageYOffset -->
  <div class="work-info">
    <ul>
      <li id="p01" data-number="FN-UP Magazine"><a href="#">01</a></li>

      <li id="p02" data-number="Cameron Tidball-Sciullo"><a href="#">02</a></li>

      <li id="p03" data-number="Jacob Truax"><a href="#">03</a></li>

      <li id="p04" data-number="Alexander Romero"><a href="#">04</a></li>
    </ul>
  </div>

<!-- scollable sections using the scroll points and triggering the pageYOffset -->
<div class="container">
  <section class="work-page fn-up" data-client="FN-UP Magazine" data-seen-1="yes">
    <div class="content">
      <img src="lib/fn-up.png">
    </div>
  </section>

  <section class="work-page cameron" data-client="Cameron Tidball-Sciullo" data-seen-2="yes">
    <div class="content">
      <img src="lib/alex.png">
    </div>
  </section>

  <section class="work-page truax" data-client="Jacob Truax" data-seen-3="yes">
    <div class="content">
      <img src="lib/old.png">
    </div>
  </section>

  <section class="work-page romero" data-client="Alexander Romero" data-seen-4="yes">
    <div class="content">
      <img src="lib/alex.png">
    </div>
  </section>
</div>

  <footer class="footer">
    <h2 class="about">FN-UP Magazine</h2>
  </footer>

</body>

Answer 1

您已将事件侦听器添加到页面的Document对象。

document.addEventListener("scroll", function () {

然后，您使用window.pageYOffset计算当前文档沿垂直轴滚动的像素数。

const pixels = window.pageYOffset

在overflow-y元素中将CSS属性scroll设置为div.container时，新的滚动条将出现在窗口上。根据{{​​3}}：

  

滚动

     

如有必要，内容将被裁剪以适合填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止在内容更改时滚动条出现或消失。）打印机仍然可以打印溢出的内容。

从那一刻开始，您没有滚动document，而是滚动div.container。那不会触发您的scroll事件。

您需要将事件绑定到div元素：

const container = document.querySelector("div.container")
container.addEventListener("scroll", function () {

并且，无需计算document的滚动量，而是获得scrollTop的{​​{1}}属性：

div.container

您需要对涉及上述计算的代码的任何部分进行相同的更改。在const pixels = container.scrollTop 中：

smoothScroll()