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