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

Question

I am trying to have elements with opacity set to 0 change to 1 when brought into the user's view. how do I do this using only pure javascript? NO JQUERY, please. Thank you in advance for any help offered.

I have tried adding a class and removing a class when in view and nothing is working. This is a very simple task and I am just not sure what to do here. I have sought out documentation but all that I have found either include jquery or are more complicated than what I am looking to do.

<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

You have a couple of problems. The code below sort of does what you want, but the math to determine when a div is shown is not 100% correct. I'll leave it up to you to fix that.

The main problem is that document.querySelectorAll returns an array of elements . So you need to process that array of elements, checking each one to see if it is in view, and then adding / removing classes for just that element.

Also, there is no height attribute for elements. Use console.log liberally to explore what properties are available and which one suits your purpose.

 var toBeShown = document.querySelectorAll(".booger"); function showIt() { toBeShown.forEach(function(elem) { const scrolled = (window.scrollY + window.innerHeight) - (elem.offsetTop/2); const imageBottom = elem.offsetTop + scrolled; const isHalfShown = scrolled > elem.offsetTop; const isNotScrolledPast = window.scrollY < imageBottom; if (isHalfShown && isNotScrolledPast) { elem.classList.add('boogers'); } else { elem.classList.remove('boogers'); } }); } window.addEventListener('scroll', showIt); 

 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.3; } .boogers { opacity: 1; } 

 <div class="outer"> <div class="booger" >hay</div> <div class="booger">b</div> <div class="booger">c</div> <div class="booger">d</div> <div class="booger">e</div> <div class="booger">f</div> <div class="booger">gee</div> <div class="booger">haytch</div> <div class="booger">hi</div> </div> 

Answer 2

I agree with Todd on all the reasons he cited, but I think the logic can be cleaned up quite a bit.

All you want to watch for is when the top of the item scrolls into the center of the viewport, add an class, when it is below, remove said class.

I put together a codepen to demonstrate.

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);

Although I love your class naming standard, ;-) I changed the boogers class to scrolled to be a bit more obvious on it's meaning