監測元素resize
前言
近來有需求要做分頁,聽起來可能有點Low。 所以我要把Low的事情做得有點逼格。
分頁本身沒啥,但是數據量起來了,比如十萬。 要是不做點處理, 那你的頁面估計爽得很,機器也爽得很。 放心,我不會讓你這麼爽。
大量數據展現方案
比較流行的當然是虛擬滾動(無限滾動)。
- 始終展示的是有限的固定節點。
- 外層創建滾動層。
一句話,就是反覆利用固定節點展現數據。
其中還有兩個點
何時需要加載新的分頁數據
- scrollTop , clientHeight, scrollHeight
- IntersectionObserver (chrome 55+)
如何知道容器寬高變化
本文就圍繞着這個展開
因為使用的是react框架,使用了 react-window, react-window就是用來展現海量數據的react列表組件。
因為項目需要,還要不通尺寸一行展現不同數量的數據。 肯定有人就說,監聽window.resize。
沒錯,監聽resize一定程度,但是window.resize, 並不能讓我知道容器本身的尺寸,當
然可以通過getComputedStyle獲取。 要是window沒有resize的情況呢。
我就想實時的知道尺寸的變化。
尺寸變化監測方案
監測元素resize這裡有幾種方案的測試和源碼。
Cross-Browser, Event-based, Element Resize Detection
思路:
如果IE,直接註冊onresize(這個點贊啊)
否則: 創建 type為text/html的object
設置position為absolute, 高度100%, 寬度100% (這樣可以獲得父容器的寬高)
設置pointer-events:none,利用點擊穿透(讓object窗體變成幽靈)
object元素的高度變化后,通知訂閱者
resize事件節流
問題:
- 創建object
- 事件處理函數掛載了元素本身上
javascript-detect-element-resize
創建三個子元素,利用scroll事件來監測變化。
原理:
https://zhuanlan.zhihu.com/p/24887312
The scroll event is fired when the document view or an element has been scrolled.
當文檔視圖或者元素滾動的時候會觸發 scroll 事件。
也就是說元素滾動的時候會觸發這個事件,那麼什麼時候元素會滾動?當元素大於其父級元素,且父級元素允許其滾動的時候,該元素可以進行滾動。
換句話說,元素可以滾動意味着父子元素大小不一致,這是這個方法的核心。
那麼我們需要讓元素大小發生改變時,使得 scrollLeft 或者 scrollTop 發生改變,從而觸發 scroll 事件,進一步得知其大小發生了改變。
visibility: hidden; opacity: 0; position: absolute;讓自己變得虛無
addEventListener(“scroll”, scrollListener, true) 在捕捉階段攔截事件,使用false無效
div.expand-trigger 變大
div.expand-trigger 變小
animationstart來監聽显示,比如style.display = ‘none’然後style.display = ‘block’
問題:
- 額外創建四個元素節點以及一個style節點
- 事件都掛載了元素本身身上,
ResizeObserver
原生自帶的方案, 兼容性並不高, resize-observer-polyfill 基於resize和MutationOberver的polyfill實現了ResizeObserver。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log(entry.target.id, `height:${entry.contentRect.height} width:${entry.contentRect.width}`);
}
});
resizeObserver.observe(document.querySelector('#my_element'));
resizeObserver.observe(document.querySelector('#my_element2'));
此外
當然,我覺得還
- 定時器 + getComputedStyle 也是很低成本的實現。
- resize + MutationOberver 也是很簡單的方案。
【精選推薦文章】
如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!
想要讓你的商品在網路上成為最夯、最多人討論的話題?
網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線
不管是台北網頁設計公司、台中網頁設計公司,全省皆有專員為您服務
想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師"嚨底家"!!