How do you change the background colour on scroll?

Question

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" class="change" 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

Answer 1

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 class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div>

Answer 2

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