快捷導(dǎo)航

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

更新時(shí)間：2024年07月01日 10:06:36 作者：庫(kù)庫(kù)的寫代碼

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

說(shuō)明：在進(jìn)行后臺(tái)系統(tǒng)開發(fā)時(shí)，經(jīng)常會(huì)用到一些圖表展示，當(dāng)改變?yōu)g覽大小后，這些圖表本身是沒(méi)有響應(yīng)式的，可以借助第三方插件element-resize-detector來(lái)監(jiān)聽(tīng)窗口的變化

一、element-resize-detector 安裝

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

npm install element-resize-detector

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

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

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

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

二、插件使用

1.插件引入

import elementResizeDetectorMaker from "element-resize-detector";

2.創(chuàng)建實(shí)例對(duì)象

let erd = elementResizeDetectorMaker();


//如果有快速滾動(dòng),如果沒(méi)有不需要進(jìn)行如下配置
let erdUltraFast = elementResizeDetectorMaker({
  strategy: "scroll" 
});

3.監(jiān)聽(tīng)元素

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

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

您可能感興趣的文章: