如何判断一个HTML元素是否正在屏幕上呈现?

How might I tell if an HTML element is being rendered on the screen?

本文关键字：屏幕 是否 HTML 判断 何判断 一个 元素      更新时间：2023-09-26

我想一个元素做一个CSS3动画一旦页面向下滚动到足够的可见，我想知道是否有任何方法来完成这一点。任何涉及JavaScript或CSS的东西都可以工作。我已经做了很多谷歌搜索和Stackoverflow搜索，不能找到确切的我需要的

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

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;

如果你担心水平定位，也可以使用同样的方法。

这取决于你具体想做什么。我会查看这些资源:

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

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

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

把你的CSS3动画样式放到一个类中，但是不要把它分配给你的元素，直到它完全滚动到视图中。

假设您的元素有sprite的id，这应该让您继续:

<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';
  }
}
相关文章：