时间戳

首页 > 解决方案 > 如何仅使用纯 JavaScript 对滚动元素进行简单的不透明度更改？

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

问题描述

我试图让不透明度设置为 0 的元素在进入用户视图时更改为 1。我如何只使用纯 JavaScript 来做到这一点？没有JQUERY，请。提前感谢您提供的任何帮助。

我尝试在视图中添加一个类并删除一个类，但没有任何效果。这是一个非常简单的任务，我只是不确定在这里做什么。我已经查找了文档，但我发现的所有内容要么包括 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);

标签： javascript

解决方案

我同意托德所引用的所有原因，但我认为逻辑可以清理很多。

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

我整理了一个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更明显的意思

推荐阅读