这个问题有30多个答案,没有一个答案使用我一直在使用的极其简单的纯JS解决方案。正如许多其他人所推动的那样,无需加载jQuery即可解决此问题。
为了确定元素是否在视口内,我们必须首先确定元素在体内的位置。正如我曾经想过的那样,我们不需要递归执行此操作。相反,我们可以使用element.getBoundingClientRect()
。
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
该值是对象顶部和身体顶部之间的Y差。
然后,我们必须判断该元素是否在视图内。大多数实现都会询问full元素是否在视口内,因此这就是我们要介绍的内容。
首先,窗口的顶部位置是:window.scrollY
。
我们可以通过将窗口的高度添加到其顶部位置来获得窗口的底部位置:
var window_bottom_position = window.scrollY + window.innerHeight;
让我们创建一个简单的函数来获取元素的最高位置:
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
此函数将返回元素在窗口中的顶部位置,或者0
如果您通过除元素之外的其他元素将其传递给其他对象,则该函数将返回。.getBoundingClientRect()
。这种方法已经存在了很长时间,因此您不必担心浏览器不支持它。
现在,我们元素的最高位置是:
var element_top_position = getElementWindowTop(element);
和或元素的底部位置是:
var element_bottom_position = element_top_position + element.clientHeight;
现在,我们可以通过检查元素的底部位置是否低于视口的顶部位置,并检查元素的顶部位置是否高于视口的底部位置,来确定元素是否在视口中:
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
在这里,您可以执行逻辑以in-view
在元素上添加或删除类,然后可以在CSS中使用过渡效果对其进行处理。
令我惊讶的是,我在其他任何地方都找不到该解决方案,但是我相信这是最干净,最有效的解决方案,它不需要您加载jQuery!