element-resize-detector監(jiān)聽普通元素的實現(xiàn)示例

更新時間：2024年07月01日 10:06:36 作者：庫庫的寫代碼

當涉及到網頁元素的實時尺寸變化監(jiān)測時,element-resize-detector?是一個值得推薦的開源庫,本文主要介紹了element-resize-detector監(jiān)聽普通元素的實現(xiàn)示例,感興趣的可以了解一下

一、element-resize-detector 安裝

當涉及到網頁元素的實時尺寸變化監(jiān)測時，element-resize-detector 是一個值得推薦的開源庫。它能以驚人的速度實現(xiàn)跨瀏覽器的元素大小調整監(jiān)聽，比傳統(tǒng)方法快了約37倍。讓我們深入了解這個神器。

npm install element-resize-detector

element-resize-detector 使用了兩種不同的監(jiān)聽策略：

對象方式：修改元素CSS屬性使其觸發(fā)布局更新，從而捕獲尺寸變化。
滾動方式（默認）：通過在元素內部創(chuàng)建滾動區(qū)域并監(jiān)聽滾動事件，達到無閃爍、高性能的監(jiān)控效果。

該庫在處理性能和兼容性方面做了大量工作，包括：

對于靜態(tài)定位（position: static）的元素，會自動轉換為相對定位。
添加隱藏元素作為內部監(jiān)聽器，以確保在所有瀏覽器中的穩(wěn)定運行。

二、插件使用

1.插件引入

import elementResizeDetectorMaker from "element-resize-detector";

2.創(chuàng)建實例對象

let erd = elementResizeDetectorMaker();


//如果有快速滾動,如果沒有不需要進行如下配置
let erdUltraFast = elementResizeDetectorMaker({
  strategy: "scroll" 
});

3.監(jiān)聽元素

 erd.listenTo(
      document.getElementById("endlistenEartagEchart"), //第一個參數(shù)是要監(jiān)聽的dom
      function (element) {
        setTimeout(() => {
        //  that.chartBoxW =
        //  document.getElementById("endlistenEartagEchart").offsetWidth - 30;
        //  that.setEchart();
        }, 0);
      } //第二個參數(shù)回調 執(zhí)行dom變化執(zhí)行的方法
    );

到此這篇關于element-resize-detector監(jiān)聽普通元素的實現(xiàn)示例的文章就介紹到這了,更多相關element-resize-detector監(jiān)聽普通元素內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: