淺談Emergence.js 檢測元素可見性的 js 插件
Emergence.js 是一個輕量級,高性能的 JS 插件,用于檢測和操作瀏覽器中的元素。
這個插件被設(shè)計為允許根據(jù)瀏覽器中的可見性對元素進(jìn)行操作。它使開發(fā)人員可以自由使用自己的 CSS 或JS 來查看動畫還是狀態(tài)的改變。它利用 HTML5 數(shù)據(jù)屬性而不是類來簡化開發(fā)。Emergence.js 是同類型中最輕,最兼容的插件之一。
emergence.js 的特點
- 無需依賴其他組件
- 支持IE8 +和所有現(xiàn)代瀏覽器
- 壓縮后只有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" 到您想要觀看的任何元素:
< div class = “ element ” data-emergence = “ hidden ” > </ div >
當(dāng)元素在視口內(nèi)變得可見時,屬性將變?yōu)?data-emergence="visible" ?,F(xiàn)在,您可以利用CSS來動畫元素:
.element [ data-emergence = hidden ] { / *隱藏狀態(tài)* / } .element [ data-emergence = visible ] { / *可見狀態(tài)* / }
自定義選項
Emergence.js有許多選項可以自定義。下面是默認(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.'); } } });
選項說明
container:容器,默認(rèn)情況下,元素的可見性將由窗口的視口尺寸和X / Y滾動位置(設(shè)置為window)確定。但是,可以將其更改為自定義容器。例如:
var customContainer = document.querySelector('.wrapper'); // www.xttblog.com emergence.init({ container: customContainer });
Throttle:是一種防止與滾動和調(diào)整事件大小相關(guān)的性能問題的方法。油門將創(chuàng)建一個小的超時,并在事件過程中每隔一定的毫秒量穩(wěn)定地檢查元素的可見性。默認(rèn)是250。
reset:確定數(shù)據(jù)屬性狀態(tài)是否在顯示后重置。false如果您希望元素即使在離開視口后仍保持其顯示狀態(tài),請將其重置為。默認(rèn)是true。
handheld:Emergence將為大多數(shù)手持設(shè)備型號(如手機(jī)和平板電腦)進(jìn)行檢查。設(shè)置false為時,插件將不會在這些設(shè)備上運(yùn)行。默認(rèn)是true。
elemCushion:元素坐標(biāo)將決定在視口內(nèi)需要多少元素才算“可見”。0.5的值將等于50%的元素需要可見。默認(rèn)是0.15。
offsetTop, offsetRight, offsetBottom, offsetLeft:在視口的任何邊上提供偏移量(以像素為單位)。如果您有一個固定的組件(例如標(biāo)題),那么這非常有用,您可以為標(biāo)題的高度偏移相同的值。100應(yīng)用于的值offsetTop將意味著元素只有在距離視口頂部大于100像素時才會被視為可見。所有的默認(rèn)值是0。
callback:用于提供回調(diào)來確定元素何時可見,隱藏和重置??赡艿臓顟B(tài)是visible,reset和noreset。
另外Emergence.js還提供了兩個高級方法emergence.engage();和emergence.disengage();他們的作用剛好相反。
Emergence.js依賴于以下瀏覽器API:querySelectorAll
為了支持IE8,請確保標(biāo)準(zhǔn)模式。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
小程序hover-class點擊態(tài)效果實現(xiàn)
這篇文章主要介紹了小程序hover-class點擊態(tài)效果實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02smartupload實現(xiàn)文件上傳時獲取表單數(shù)據(jù)(推薦)
這篇文章主要介紹了smartupload實現(xiàn)文件上傳時獲取表單數(shù)據(jù)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-12-12