我們做一些動畫效果的時候可以用jq來判斷滾動的距離，根據(jù)元素高度和距離頂部的高度判斷元素是否進(jìn)入可視區(qū)域中，比較方便的同時但由于必須一直處于監(jiān)聽狀態(tài)可能會對瀏覽器性能造成影響，于是我發(fā)現(xiàn)這樣一款可以用來監(jiān)聽是否進(jìn)入頁面中的api--IntersectionObserver。
首先我們以new的形式聲明一個對象，接收兩個參數(shù)callback和option，callback就是當(dāng)開啟監(jiān)聽后發(fā)生滾動時候的回調(diào)函數(shù)，它的參數(shù)是一個數(shù)組，每個成員都是一個IntersectionObserverEntry對象。
另一個參數(shù)option是配置對象，他決定callback的判定條件，他有三個參數(shù)，root，rootMargin，，threshold。
root指定根元素，rootMargin可以設(shè)定元素外邊距，threshold指的是可見區(qū)域的占比。
Io.observe()開始監(jiān)聽一個元素。
如下我們看一個例子
這里我們監(jiān)聽id為輪播的元素
以下就是entries的數(shù)據(jù)
當(dāng)監(jiān)聽元素出現(xiàn)在瀏覽器可視區(qū)域內(nèi)部，可以看到isIntersecting的值變?yōu)榱藅rue，jq也正常運(yùn)行。
上一篇： Swiper圖的“左右護(hù)法”
下一篇： d2-crud如何自定義search表單
關(guān)鍵詞:
