快捷導(dǎo)航

淺談Emergence.js 檢測(cè)元素可見(jiàn)性的 js 插件

更新時(shí)間：2017年11月18日 10:12:27 投稿：zx

這篇文章主要介紹了淺談Emergence.js 檢測(cè)元素可見(jiàn)性的 js 插件，詳細(xì)的介紹了Emergence.js安裝和使用方法，具有一定的參加性，有興趣的可以了解一下

Emergence.js 是一個(gè)輕量級(jí)，高性能的 JS 插件，用于檢測(cè)和操作瀏覽器中的元素。

這個(gè)插件被設(shè)計(jì)為允許根據(jù)瀏覽器中的可見(jiàn)性對(duì)元素進(jìn)行操作。它使開(kāi)發(fā)人員可以自由使用自己的 CSS 或JS 來(lái)查看動(dòng)畫(huà)還是狀態(tài)的改變。它利用 HTML5 數(shù)據(jù)屬性而不是類(lèi)來(lái)簡(jiǎn)化開(kāi)發(fā)。Emergence.js 是同類(lèi)型中最輕，最兼容的插件之一。

emergence.js 的特點(diǎn)

無(wú)需依賴(lài)其他組件
支持IE8 +和所有現(xiàn)代瀏覽器
壓縮后只有1kb

安裝

Emergence.js 的安裝非常的簡(jiǎn)單。npm的安裝方法如下：

npm install emergence.js

另外我們也可以直接下載它，在html文件中引入Emergence.js即可。

<script src="path/to/emergence.min.js"></script>
<script>
 emergence.init();
</script>

如何使用

添加 data-emergence="hidden" 到您想要觀看的任何元素：

< div class = “ element ” data-emergence = “ hidden ” > </ div >

當(dāng)元素在視口內(nèi)變得可見(jiàn)時(shí)，屬性將變?yōu)?data-emergence="visible" ?，F(xiàn)在，您可以利用CSS來(lái)動(dòng)畫(huà)元素：

.element [ data-emergence = hidden ] {
 / *隱藏狀態(tài)* /
}
.element [ data-emergence = visible ] {
 / *可見(jiàn)狀態(tài)* / 
}

自定義選項(xiàng)

Emergence.js有許多選項(xiàng)可以自定義。下面是默認(rèn)值：

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.');
 }
 }
});

選項(xiàng)說(shuō)明

container：容器，默認(rèn)情況下，元素的可見(jiàn)性將由窗口的視口尺寸和X / Y滾動(dòng)位置（設(shè)置為window）確定。但是，可以將其更改為自定義容器。例如：

var customContainer = document.querySelector('.wrapper');
// www.xttblog.com
emergence.init({
 container: customContainer
});

Throttle：是一種防止與滾動(dòng)和調(diào)整事件大小相關(guān)的性能問(wèn)題的方法。油門(mén)將創(chuàng)建一個(gè)小的超時(shí)，并在事件過(guò)程中每隔一定的毫秒量穩(wěn)定地檢查元素的可見(jiàn)性。默認(rèn)是250。

reset：確定數(shù)據(jù)屬性狀態(tài)是否在顯示后重置。false如果您希望元素即使在離開(kāi)視口后仍保持其顯示狀態(tài)，請(qǐng)將其重置為。默認(rèn)是true。

handheld：Emergence將為大多數(shù)手持設(shè)備型號(hào)（如手機(jī)和平板電腦）進(jìn)行檢查。設(shè)置false為時(shí)，插件將不會(huì)在這些設(shè)備上運(yùn)行。默認(rèn)是true。

elemCushion：元素坐標(biāo)將決定在視口內(nèi)需要多少元素才算“可見(jiàn)”。0.5的值將等于50％的元素需要可見(jiàn)。默認(rèn)是0.15。

offsetTop, offsetRight, offsetBottom, offsetLeft：在視口的任何邊上提供偏移量（以像素為單位）。如果您有一個(gè)固定的組件（例如標(biāo)題），那么這非常有用，您可以為標(biāo)題的高度偏移相同的值。100應(yīng)用于的值offsetTop將意味著元素只有在距離視口頂部大于100像素時(shí)才會(huì)被視為可見(jiàn)。所有的默認(rèn)值是0。

callback：用于提供回調(diào)來(lái)確定元素何時(shí)可見(jiàn)，隱藏和重置?？赡艿臓顟B(tài)是visible，reset和noreset。

另外Emergence.js還提供了兩個(gè)高級(jí)方法emergence.engage();和emergence.disengage();他們的作用剛好相反。

Emergence.js依賴(lài)于以下瀏覽器API：querySelectorAll

為了支持IE8，請(qǐng)確保標(biāo)準(zhǔn)模式。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。