javascript - 如何仅使用纯 javascript 对滚动上的元素进行简单的不透明度更改？

Question

我试图让不透明度设置为 0 的元素在进入用户 View 时更改为 1。我如何仅使用纯 javascript 来执行此操作？请不要使用 JQUERY。预先感谢您提供的任何帮助。

我尝试添加一个类并在 View 中删除一个类，但没有任何效果。这是一项非常简单的任务，我只是不确定在这里该做什么。我已经找到了文档，但我发现的所有内容要么包括 jquery，要么比我想要做的更复杂。

<div class="outer">

        <div class="booger" ></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>
</div>


body {
box-sizing: border-box;

margin: 0;
padding: 0;
text-align: center;

text-decoration: none;
outline: none;
}

.outer {
width: 100%;
min-height: 100vh;
background-color: grey;

}

.booger {
display: inline-block;
width: 49%;

margin: 50px 30px;
padding: 100px 0;
background-color: darkgray;
opacity: 0;
}

.boogers {
opacity: 1;
} 

var toBeShown = document.querySelectorAll(".booger");

function showIt() {

const scrolled = (window.scrollY + window.innerHeight) -                        
(toBeShown.height/2);

const imageBottom = scrolled.offsetTop + scrolled.height;
const isHalfShown = scrolled > scrolled.offsetTop;
const isNotScrolledPast = window.scrollY < imageBottom;

if (isHalfShown && isNotScrolledPast) {
scrolled.classList.add('boogers');
} else {
scrolled.classList.remove('boogers');
}
}

window.addEventListener('scroll', showIt);

Answer 1

我同意 Todd关于他引用的所有原因，但我认为逻辑可以清理很多。

您要注意的是，当项目顶部滚动到视口(viewport)中心时，添加一个类，当它在下方时，删除该类。

我整理了一个 codepen 来演示。

https://codepen.io/bickle66/pen/YbamYq

function showIt() {
  const toBeShown = document.querySelectorAll(".booger"); // consider adding :not(.scrolled) to selector to reduce the number of iterations if you don't want to support scrolling up

  // consider taking this outside of the loop and resetting it on window resize to optimize the loop
  const halfScreen = window.innerHeight / 2;

  toBeShown.forEach((item, i) => {
    const scrolled = (window.scrollY + window.innerHeight);// - (item.offsetHeight/2);

    if (item.offsetTop - window.scrollY < halfScreen) {
      item.classList.add('scrolled');
    } else {
      item.classList.remove('scrolled');
    }
  })

}

window.addEventListener('scroll', showIt);

虽然我喜欢你的类命名标准，;-) 我将 boogers 类更改为 scrolled 以使其含义更加明显