visibly.js 是一个用于检测 HTML 元素是否可见的 JavaScript 库。在前端开发中，我们经常需要根据用户的滚动行为或者页面加载情况来判断某个元素是否显示。visibly.js 可以准确地检测出元素是否可见，并且可以在元素可见性发生变化时触发特定的事件。
安装和引入
首先，在你的项目中使用 npm 或 yarn 安装 visibly.js：
--- ------- ------- ------
或者
---- --- -------
然后，在你的 JavaScript 文件中引入 visibly.js：
------ ------- ---- ----------
API
visibly.js 提供了以下几个 API：
visibly.onVisible(element, callback)
当元素可见时调用回调函数。element 参数是一个 DOM 元素，callback 是一个函数。
-------------------------------------------------------- ---------- - -------------------- -- ----------- ---
visibly.onHidden(element, callback)
当元素隐藏时调用回调函数。element 参数是一个 DOM 元素，callback 是一个函数。
------------------------------------------------------- ---------- - -------------------- -- ---------- ---
visibly.visibilityState()
返回当前页面的可见性状态。可见性状态可能是以下几种之一：visible、hidden、prerender、unloaded。
-- -------------------------- --- --------- - ----------------- -- ---------- -
visibly.isHidden()
返回一个布尔值，表示当前页面是否隐藏。
-- -------------------- - ----------------- -- ---------- -
visibly.isSupported()
返回一个布尔值，表示当前浏览器是否支持可见性 API。
-- ------------------------ - -------------------- ---- --- ------- ---------- ------- -
示例
下面是一个示例代码，演示了如何使用 visibly.js 监听某个元素的可见性变化：
--------- -----
------
------
----------------- ---------------
------- --------------------------------------------
-------
------
---- --------------- -------------- ----------- -------------
--------
-------------------------------------------------------- ---------- -
-------------------- -- -----------
---
------------------------------------------------------- ---------- -
-------------------- -- ----------
---
---------
-------
-------当用户滚动页面时，可以在控制台中看到相应的输出。如果将 style 属性中的 height 值改小，使得元素不占据整个屏幕，那么在元素滚出屏幕时也会触发 onHidden 回调函数。
总结
通过本文，你学习了 npm 包 visibly.js 的基本使用方法和 API。使用 visibly.js 可以方便地检测元素的可见性，并在元素可见性变化时触发特定的事件，为前端开发提供了很多便利。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/37886