主页 / 问题 / 699430
Accepted
Nikolay
Asked:2020-07-30 03:47:02 +0000 UTC2020-07-30 03:47:02 +0000 UTC

仅当块开始出现在可见区域时才突出显示块

  • 772

我有自己的经验，但它有错误。也许收藏中有人？这是我的作品。在这里，当他出现在屏幕 20% 的可见区域时，开始绘制

let scrollY = window.pageYOffset || document.documentElement.scrollTop;

if ( ( scrollY + document.documentElement.clientHeight * 0.8
        > el.offsetTop &&
        scrollY < el.offsetTop ) ||
        scrollY < el.offsetTop + el.offsetHeight &&
        scrollY > el.offsetTop
    ) {
          el.style.backgroundColor = "#999";
      }
javascript

1 个回答

  1. Best Answer

    var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
function getCoords(elem) { // кроме IE8-
  var box = elem.getBoundingClientRect();
  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset,
    bottom: box.top + pageYOffset + elem.offsetHeight
  };
}
window.onscroll = function() {
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if(clientHeight + scrolled > getCoords(test).top && scrolled < getCoords(test).bottom) {
        test.style.background = 'red';
    } else{
        test.style.background = 'black';
    }
};
    #test{
    background: black;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 2000px;
    transition: 3s;
}
body{
    height: 5000px;
}
    <div id="test"></div>

    • 3

相关问题