我們做一些動畫效果的時候可以用jq來判斷滾動的距離,根據元素高度和距離頂部的高度判斷元素是否進入可視區域中,比較方便的同時但由于必須一直處于監聽狀態可能會對瀏覽器性能造成影響,于是我發現這樣一款可以用來監聽是否進入頁面中的api--IntersectionObserver。
首先我們以new的形式聲明一個對象,接收兩個參數callback和option,callback就是當開啟監聽后發生滾動時候的回調函數,它的參數是一個數組,每個成員都是一個IntersectionObserverEntry對象。
另一個參數option是配置對象,他決定callback的判定條件,他有三個參數,root,rootMargin,,threshold。
root指定根元素,rootMargin可以設定元素外邊距,threshold指的是可見區域的占比。
Io.observe()開始監聽一個元素。
如下我們看一個例子

這里我們監聽id為輪播的元素

以下就是entries的數據

當監聽元素出現在瀏覽器可視區域內部,可以看到isIntersecting的值變為了true,jq也正常運行。
![]()

上一篇: Swiper圖的“左右護法”
下一篇: d2-crud如何自定義search表單
關鍵詞:



