DOM & BOM – ResizeObserver
阿新 • • 發佈：2022-03-11
介紹
想監聽一個 element 的 size changes 就可以使用 ResizeObserver 了.
在看這一篇之前, 建議先看看 DOM & BOM – IntersectionObserver, 它們的模式很像, 一起了解會比較容易.
效果
參考:
Youtube – Learn Resize Observer In 5 Minutes
場景
<body> <button class="button">resize</button> <div class="box">resize me</div> </body>
CSS Style
.box { margin-top: 3rem; width: 100px; height: 100px; background-color: pink; border: 2px solid red; padding: 1rem; }
new ResizeObserver()
const rs = new ResizeObserver((entries) => { console.log("entry", entries[0]); }); rs.observe(document.querySelector(".box")); document.querySelector(".button").addEventListener("click", () => { document.querySelector(".box").style.width = "400px"; });
呼叫, observe, unobserve 方式和 IntersectionObserver 是一樣的.
new 例項 > observe > 當觀察的元素 resize 就會觸發回撥. 不想觀察了就 unobserve 或者直接 disconnect 整個 observer.
Callback Info
綠點是常用到的, 其它的就不介紹了
borderBoxSize, 它是 array 哦, 但我不知道什麼時候會超過 1 個啦.
blockSize 就是 height, inlineSize 就是 width. 這個是 Logical Properties 的寫法.
ContentBoxSize, 顧名思義它就是依據 box-sizing: content-box 的計算方式 (width 不包含 padding 和 border).
contentRect: 它的 width 和 height 是扣除了 padding, border 的, 至於 rect, 它並不是 boundingClientRect 哦, 具體是什麼座標我也沒去研究, 以後有需求在來補上唄.