javascript - 使用 window.pageYOffset 滚动点/overflow-y 破坏 javascript 函数

Question

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

但是，在我实现 CSS 滚动点并在可滚动部分上添加 div.container 后，我的 javascript 停止工作。特别是当我设置 overflow-y: scroll 时。

基本上当我制作 div.container overflow-y: scroll; 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

当您在 div.container 元素中将 CSS 属性 overflow-y 设置为 scroll 时，窗口上会出现新的滚动条。根据MDN :

scroll

Content is clipped if necessary to fit the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

从那一刻起，您不再滚动文档，而是滚动div.container。这不会触发您的 scroll 事件。

您需要将事件绑定(bind)到 div 元素:

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

并且，不是计算 document 滚动了多少，而是获取 div.container 的 scrollTop 属性:

const pixels = container.scrollTop

您需要对涉及上述计算的代码的任何部分进行相同的更改。在 smoothScroll() 中:

// const startPosition = window.pageYOffset;
const startPosition = container.scrollTop;

// window.scrollTo(0,run);
container.scrollTo(0,run);