快速滚动以更改样式

Question

是否可以滚动到 .project 并使背景变红而不滚动 慢且接近 class .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

要使其成为 'fast' 你最好使用 >= 运算符而不是 ==:

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>

Answer 2

您可以使用 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>

快速滚动以更改样式

Fast scroll to change style

html

javascript

css

jquery

jquery-ui

阈值