本文主要介紹了淺談Emergence.js 檢測元素可見性的js 插件，詳細的介紹了Emergence.js安裝和使用方法，具有一定的參加性，有興趣的可以了解一下，希望能幫助到大家。
Emergence.js 是一個輕量級，高效能的 JS 插件，用於偵測和操作瀏覽器中的元素。
這個外掛程式被設計為允許根據瀏覽器中的可見性對元素進行操作。它使開發人員可以自由使用自己的 CSS 或JS 來查看動畫還是狀態的改變。它利用 HTML5 資料屬性而不是類別來簡化開發。 Emergence.js 是同類型中最輕，最相容的插件之一。
emergence.js 的特點
#無須依賴其他元件
支援IE8 +和所有現代瀏覽器
壓縮後只有1kb
##Emergence.js的安裝非常的簡單。 npm的安裝方法如下：
npm install emergence.js
另外我們也可以直接下載它，在html檔案中引入Emergence.js即可。
<script src="path/to/emergence.min.js"></script> <script> emergence.init(); </script>
如何使用
#新增data-emergence="hidden" 到您想要觀看的任何元素：
< p class = “ element ” data-emergence = “ hidden ” > </ p >
當元素在視口內變得可見時，屬性將變為data-emergence="visible" 。現在，您可以利用CSS來動畫元素：
.element [ data-emergence = hidden ] {
/ *隐藏状态* /
}
.element [ data-emergence = visible ] {
/ *可见状态* /
}#自訂選項
Emergence.js有許多選項可以自訂。以下是預設值：
emergence.init({
container: window,
reset: true,
handheld: true,
throttle: 250,
elemCushion: 0.15,
offsetTop: 0,
offsetRight: 0,
offsetBottom: 0,
offsetLeft: 0,
callback: function(element, state) {
if (state === 'visible') {
console.log('Element is visible.');
} else if (state === 'reset') {
console.log('Element is hidden with reset.');
} else if (state === 'noreset') {
console.log('Element is hidden with NO reset.');
}
}
});選項說明
#container：容器，預設情況下，元素的可見性將由視窗的視窗尺寸和X / Y捲動位置（設定為window）決定。但是，可以將其變更為自訂容器。例如：
var customContainer = document.querySelector('.wrapper');
// www.xttblog.com
emergence.init({
container: customContainer
});Throttle：是一種防止與捲動和調整事件大小相關的效能問題的方法。油門將創建一個小的超時，並在事件過程中每隔一定的毫秒量穩定地檢查元素的可見性。預設是250。
reset：確定資料屬性狀態是否在顯示後重設。 false如果您希望元素即使在離開視窗後仍保持其顯示狀態，請將其重設為。預設是true。
handheld：Emergence將為大多數手持裝置型號（如手機和平板電腦）進行檢查。設定false為時，插件將不會在這些裝置上運作。預設是true。
elemCushion：元素座標將決定在視口內需要多少元素才算「可見」。 0.5的值將等於50％的元素需要可見。預設是0.15。
offsetTop, offsetRight, offsetBottom, offsetLeft：在視窗的任何邊上提供偏移量（以像素為單位）。如果您有一個固定的組件（例如標題），那麼這非常有用，您可以為標題的高度偏移相同的值。 100應用於的值offsetTop將意味著元素只有在距離視窗頂部大於100像素時才會被視為可見。所有的預設值是0。
callback：用於提供回調來確定元素何時可見，隱藏和重置。可能的狀態是visible，reset和noreset。
另外Emergence.js也提供了兩個高階方法emergence.engage();和emergence.disengage();他們的角色剛好相反。
Emergence.js依賴以下瀏覽器API：querySelectorAll
為了支援IE8，請確保標準模式。
相關推薦：
jquery.validata.js 外掛程式集合，想要的都在這裡
jQuery結合jQuery.cookie.js外掛實作換膚功能範例#
以上是Emergence.js 檢測元素可見性的 js 插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
