快速滚动以更改样式

Question

是否可以滚动到.project 并使背景变为红色而不滚动缓慢且靠近类.project？

基本上我希望用户能够滚动并显示红色，即使他或她快速滚动，但是当用户高于或低于projectPosition.top 时，背景应该是标准颜色（黑色）。

var project = document.getElementsByClassName('project')[0];
var projectPosition = project.getBoundingClientRect();

document.addEventListener('scroll', () => {

    var scrollY = window.scrollY;
    
    if (scrollY == projectPosition.top) {
        project.style.background = "red";
        project.style.height = "100vh";
    } else {
        project.style.background = "black";
        project.style.height = "200px";
    }
    
});

.top {
  height: 700px;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}

<div class="top"></div>
<div class="project"></div>
<div class="top"></div>

提前致谢。

Answer 1

您可以使用Intersection Observer API 而不是监听滚动事件，它可以监视进出视图的元素。每次观察到的元素进入或离开视图时，都会触发一个回调函数，您可以在其中检查元素是否进入或离开了视图，并进行相应处理。

它还具有高性能，可让您免于计算顶部和高度。 看看下面的例子。

如果您对此有任何疑问，请告诉我。

阈值

要在元素完全显示而不是部分显示时触发回调，请将threshold 选项值设置为[1]。默认值为[0]，这意味着只要元素在视图中至少1px，就会触发它。 [1] 声明必须 100% 的元素在视野范围内才能触发。该值的范围可以从 0 到 1，并且可以包含多个触发点。例如

const options = {
  threshold: [0, 0.5, 1]
};

这意味着开始、中途和完全可见。

const project = document.querySelector('.project');

const observerCallback = entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('red');
    } else {
      entry.target.classList.remove('red');
    }
  });
};

const options = {
  threshold: [1]
}

const observer = new IntersectionObserver(observerCallback, options);
observer.observe(project);

.top,
.bottom{
  height: 700px;
  width: 100%;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}

.project.red {
  background: red;
}

<div class="top"></div>
<div class="project"></div>
<div class="bottom"></div>

Answer 2

要使其“快速”，您必须使用>= 运算符而不是==：

var project = document.getElementsByClassName('project')[0];
var projectPosition = project.getBoundingClientRect();

document.addEventListener('scroll', () => {

    var scrollY = window.scrollY;
    if (scrollY >= projectPosition.top && scrollY <= projectPosition.top + projectPosition.height) {
        project.style.background = "red";
        project.style.height = "100vh";
    } else {
        project.style.background = "black";
        project.style.height = "200px";
    }
    
});

.top {
  height: 700px;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}

<div class="top"></div>
<div class="project"></div>
<div class="top"></div>