I'm trying to change the background colour of my webpage on scroll using IntersectionObserver- this is the code I have so far:

const callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        style.backgroundColor = entry.target.getAttribute('data-color');
      }
    });
  };
  
  const changes = document.querySelectorAll('.change');

  const observer = new IntersectionObserver(callback);

  changes.forEach(change => {
    observer.observe(change);
});

I would like to have it change colour when the viewer scrolls to a div, possibly using something like

<div id= "indiaText"  data-color="orange">

Does anyone have an idea of how I can achieve this? I have also tried $(window).scroll(function() { however I only get an error using this method. Thank you

CodePudding user response：

You almost had it.

The only real problem was that the style.backgroundColor = line was throwing an exception because style wasn't declared/defined. i changed it to document.body.style.backgroundColor.

I tweaked a couple of other things, but these aren't critical:

• i added an options argument { threshold: .5 } to the IntersectionObserver so the color change doesn't occur until the target div is 50% on screen.
• i added a css transition on body just to soften the color change.

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      document.body.style.backgroundColor = entry.target.dataset.color;
    }
  });
};

const changes = document.querySelectorAll('.change');

const observer = new IntersectionObserver(callback, { threshold: .5 });

changes.forEach(change => {
  observer.observe(change);
});

body {
 transition: .5s background-color;
}

.change {
  min-height: 100vh;
  background-color: white;
  width: 50%;
  margin: 40px auto;
}

<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>
<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>
<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>
<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>
<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>
<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>
<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>
<div  data-color="orange">orange</div>
<div  data-color="blue">blue</div>
<div  data-color="lavender">lavender</div>

CodePudding user response：

Just update the callback function:

if (entry.isIntersecting) {

 document.body.style.background = entry.target.getAttribute('data-color');

 //to change the background of the div
 // entry.target.style.background = entry.target.getAttribute('data-color');
 
 }