你如何改变滚动条的背景颜色？

Question

我正在尝试使用 IntersectionObserver 在滚动时更改我的网页的背景颜色-这是我到目前为止的代码：

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

我想让它在查看器滚动到 div 时改变颜色，可能使用类似

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

有谁知道我如何实现这一目标？ 我也试过 $(window).scroll(function() { 但是我只用这个方法得到一个错误。谢谢

Answer 1

你几乎拥有它。

唯一真正的问题是style.backgroundColor =行抛出异常，因为未声明/定义style 。 我将其更改为document.body.style.backgroundColor 。

我调整了其他一些东西，但这些并不重要：

• 我向 IntersectionObserver 添加了一个选项参数{ threshold: .5 } ，因此直到目标 div 在屏幕上达到 50% 时才会发生颜色变化。
• 我在body上添加了一个 css 过渡，只是为了柔化颜色变化。

 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

只需更新回调 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');
 
 }