有没有办法确定顶部的像素？

Question

我比任何事情都需要更多的解释，但欢迎举例说明。我试图使它，所以当我向下滚动时，屏幕上的特定元素将在滚动时淡入。唯一的问题是，我需要一种方法来确定元素从顶部到下有多远，使用提供的代码（或者更好的方法）。有没有一种不同的方法可以使滚动效果工作，而不必从顶部的像素单位开始？如果没有，你怎么能找到距离？这是我一直在使用的代码。if (window.scrollY>300)

Answer 1

下面是使用交集观察者 API 的简单示例

const inViewport = (entries, observer) => {

  entries.forEach(entry => {

    entry.target.classList.toggle("active", entry.isIntersecting);

  });

};

let observer = new IntersectionObserver(inViewport);

observer.observe(document.querySelector('#box'));

body { height:300vh; }

#box { width:100px; height:100px; position:absolute; top:150vh; background:red; }

/* InViewport transitions */

[data-inviewport="fade-rotate"] { /* Default state */

  transition: 2s;

  opacity: 0.1;

}

[data-inviewport="fade-rotate"].active { /* Active state */

  transform: rotate(180deg);

  opacity: 1;

}

Scroll down...

<div id="box" data-inviewport="fade-rotate"></div>

Answer 2

当元素进入页面底部时，将触发此操作：

if(element.getBoundingClientRect().top <= window.innerHeight)

当元素丰富屏幕中间时，将触发

if(element.getBoundingClientRect().top <= window.innerHeight / 2)

当然，所有事件都应该在窗口事件上onscroll