在前端开发中，经常需要检查用户是否可见某个页面元素。这个问题通常可以通过计算元素的位置和窗口的滚动来解决。
计算元素位置
要检查元素是否可见，首先需要获取它的位置信息。可以使用 getBoundingClientRect() 方法来获得元素的边界框信息。
const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();rect 对象包含了元素的左、上、右、下四个边界值以及元素的宽度和高度等属性。
检查元素是否可见
一旦获得了元素的位置信息，就可以计算出它是否可见了。如果一个元素的底部超过了窗口的顶部，并且它的顶部没有被遮挡，那么它就是可见的。
-- -------------------- ---- -------
-------- ------------------------- -
----- ---- - --------------------------------
----- ------------ -
------------------ -- --------------------------------------
------ -
----------- -- - --
-------- - ------------ --
---------- -- - --
--------- - -----------------
--
-
----- ------- - --------------------------------------
-- --------------------------- -
-------------------- -- ----------
- ---- -
-------------------- -- ---------
-上面的代码定义了一个名为 isElementVisible 的函数，该函数接受一个元素作为参数，并返回该元素是否可见的布尔值。函数内部首先获取元素的位置信息和窗口高度，然后计算出元素是否在可见范围内。
检查滚动事件
要实时检查元素是否可见，需要在窗口滚动时运行 isElementVisible 函数。可以监听 scroll 事件来检测窗口滚动事件。
window.addEventListener('scroll', function () {
const element = document.getElementById('my-element');
if (isElementVisible(element)) {
console.log('Element is visible');
} else {
console.log('Element is hidden');
}
});上面的代码监听了 scroll 事件，并在每次滚动时重新检查元素是否可见。如果元素当前不可见，则打印一条消息表示它被隐藏了。
总结
通过使用 getBoundingClientRect() 方法和计算元素的边界框以及窗口滚动位置，可以轻松地检查元素是否可见。如果需要实时检测元素的状态变化，则可以监听 scroll 事件来实现。
希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7350