Question

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

HTML中用于实现此效果的代码是<div id="fss" class="fss full-screen "></div>-当用户从#home滚开时，有一种方法可以禁用此DIV，以便在看不见背景时不会将资源专用于背景效果？

Answer 1

您可以删除div离开视口（即屏幕）时导致资源消耗的div的类（或id）。如果您愿意，您甚至可以在屏幕外添加一个临时班级。

看看下面的代码片段。尽管您看不到它，但是绿色框在屏幕上消失时会丢失类green，而是将类orange添加到了屏幕上。然后，当它回到屏幕上时，div将获得类green并失去类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>上，以在屏幕上“禁用”它。

如何关闭滚动上的JS / CSS背景效果？

1 个答案: