如何在滚动时关闭 JS/CSS 背景效果？

Question

我喜欢很酷的 JS/CSS 背景效果，但在许多速度较慢的设备上，它们会占用大量 CPU 的使用量，并且确实会使浏览器陷入困境。这个网站就是一个很好的例子：http://volar.makwan.net/index02.html

HTML 中用于此效果的代码是 <div id="fss" class="fss full-screen "></div> - 有没有办法在用户离开 #home 时禁用此 DIV 以便资源不专用不可见时的背景效果？

Answer 1

您可以删除 div 的 class（或 ID），当 div 离开视口（即屏幕）时会导致资源耗尽。如果你愿意，你甚至可以在它不在屏幕上时添加一个临时的 class。

看看下面的代码片段。虽然你看不到它，但绿色框在离开屏幕时会丢失 class green，而是添加 class orange（检查元素以查看它的变化）。然后当它回到屏幕上时 div 得到 class green 并失去 class orange:

function isElementInViewport(el) {
    let rect = el.getBoundingClientRect();
    return rect.bottom > 0 && rect.right > 0 && rect.left < (window.innerWidth || document.documentElement.clientWidth) && rect.top < (window.innerHeight || document.documentElement.clientHeight);
}

let isVisible = true;

window.onscroll = function() {
  let myGreenBox = document.getElementById('green-box');
  if(!isElementInViewport(myGreenBox) && isVisible) {
    myGreenBox.classList.add("orange");
    myGreenBox.classList.remove("green");
    
    console.log("Green Box style removed");
    isVisible = false;
  } else if(isElementInViewport(myGreenBox) && !isVisible){
    myGreenBox.classList.add("green");
    myGreenBox.classList.remove("orange");
    console.log("Green Box style added");
    isVisible = true;
  }
  
};

.box {
  height: 100px;
  width: 100px;
}

.green {
  background-color: lime;
}

.orange {
  background-color: orange;
}

.container {
  height: 200vh;
}

<div class="container">
  <div id="green-box" class="box green">

  </div>
</div>

你可以将这个想法应用到 <div id="fss" class="fss full-screen "></div> 到 'disable' 当它不在屏幕上时。

如何在滚动时关闭 JS/CSS 背景效果？

How to turn off JS/CSS background effect on scroll?

html

javascript

css

effects