javascript - 我如何判断 HTML 元素是否正在屏幕上呈现？

Question

我想要一个元素在页面向下滚动到足以使其可见时执行 CSS3 动画，我想知道是否有任何方法可以实现此目的。任何涉及 JavaScript 或 CSS 的东西都可以。我进行了许多 Google 搜索和 Stackoverflow 搜索，但无法准确找到我需要的内容。

Answer 1

根据您布局的复杂性，它可以像查找滚动位置、窗​​口高度以及元素在页面上的位置一样简单。

function scrollEvent() {
  var el = document.getElementsByTagName('a')[0];
  var body = document.getElementsByTagName('body')[0];
  var posY = (window.innerHeight + body.scrollTop) - el.offsetTop;
  var onScreen = (posY > 0 && posY < window.innerHeight) ? true : false;
}

window.onscroll = scrollEvent;

如果您也担心水平定位，请使用相同的技术。