如何判断屏幕上是否呈现HTML元素？

Question

我希望元素在页面向下滚动到足以使其可见后执行CSS3动画处理，并且我想知道是否有任何方法可以完成此操作。 任何涉及JavaScript或CSS的东西都可以使用。 我已经做了很多Google搜索和Stackoverflow搜索，但找不到我真正需要的东西。

Answer 1

这取决于您要具体做什么。 我将看看这些资源：

http://daneden.github.io/animate.css/

http://www.w3schools.com/css/css3_animations.asp

http://css-tricks.com/almanac/properties/a/animation/

Answer 2

根据布局的复杂程度，它可能很简单，例如查找滚动位置，窗口的高度以及元素在页面上的位置。

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;

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

Answer 3

将您的CSS3动画样式放在一个类中，但在将其完全滚动到视图中之前，请勿将其分配给您的元素。

假设您的元素的id为sprite ，这应该可以帮助您：

<style>
  .animate {
    //CSS3 animation style
  }
</style>

window.onscroll= function() {
  var sprite = document.getElementById('sprite');
  if(sprite.getBoundingClientRect().top>=0 && sprite.getBoundingClientRect().bottom<=window.innerHeight) {
    sprite.className= 'animate';
  }
}