我想知道一个元素当前是否在viewport中可见,即在浏览器视口中,使用 JavaScript/jQuery。
从另一个问题中,我知道.is(':visible')
我可以确定该元素是否可见,但这并不意味着它在显示窗口内(因此对用户不可见),这就是我想要的。
例如:下面的代码检查当按钮被点击时元素是否可见;但是如果我们滚动,向下到页面底部并再次按下按钮,它一直告诉我们它是,即使用户不再看到它。
$("button").on("click", function() {
alert($("#holamundo").is(":visible"));
});
button {
position:fixed;
top:5px;
right:5px;
}
p {
margin-top: 800px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>¿Está "Hola Mundo" visible?</button>
<div id="holamundo">Hola Mundo</div>
<p>.</p>
<p>.</p>
是否有任何适当的功能或如何在 JavaScript/jQuery 中检测元素是否可见并且在视口中?
我们可以通过首先访问“显示窗口”的值来验证这一点,为此我们使用对象的scrollTop
window
来知道它何时向下滚动,并且从窗口的scrollTop
+返回的值的总和中获得限制height
然后我们必须对 执行相同的过程
elemento
,为此我们将使用偏移量作为坐标并访问属性top
以获取元素的高度以及高度有了这些值,我们将通过比较来验证,函数将如下所示:
更新
作为@Alvaro Montoro 的建议,对于前面的示例,它可以工作,但不会像outerheight那样考虑高度。
padding
仅使用示例
JavaScript
更新
另一种选择是使用IntersectionObserver() API来确定元素是否可见。
创建具有三个值的 options 对象
root
,该属性确定将验证要观察元素的可见性的元素,默认情况下它采用浏览器视口rootMargin
,该属性确定将包含在可见性评估中的边距threshold
,该属性确定要观察的可见性百分比,默认值为 0,即一旦可见(最小 1px),当元素完全可见时为 1。该属性可以传递多个参数,请查看文档。:)创建 的实例
IntersectionObserver
,第一个参数是回调,第二个参数是选项对象将观察者分配给要评估的元素。例如,只有一个具有 id
holamundo
在回调中,它将具有条目参数,该参数将引用观察到的元素,(在示例中,元素将是索引 0),通过
isIntersecting
它我们验证它是否可见,考虑到选项,从中我们可以执行操作视情况而定。我制作了一个名为scroll-utility的 npm 模块(在 jsdelivr cdn 上可用),它添加了许多用于处理滚动的工具,包括知道一个元素是在另一个元素中还是在窗口中可见。 它是无依赖的,所以它不需要 jQuery 来工作。