問題
思考如何實(shí)現(xiàn): 當(dāng)元素寬度<100px的時(shí)候, 將其中的文字豎向排列, 否則橫向排列.
1. window.onResize
元素的寬度改變不一定是由窗口大小改變導(dǎo)致的, 也可能是元素之間互相的影響, 所以監(jiān)聽窗口大小改變是行不通的.
2. 翻看瀏覽器API, 使用高級(jí)函數(shù) ResizeObserver
只是實(shí)驗(yàn)功能, 瀏覽器支持一片問號(hào).
browser compatibility
3. setInterval
是一個(gè)方法, 但太不高效和優(yōu)雅, 不到萬不得已不使用.
4. google / baidu
key: 監(jiān)聽dom元素大小改變.
搜之, 發(fā)現(xiàn)一個(gè)鬼才方案, 佩服這個(gè)腦洞: 通過添加超過元素本身大小的子元素, 監(jiān)聽元素的onScoll事件來實(shí)現(xiàn)監(jiān)聽width改變.
這是原文: 巧妙監(jiān)測(cè)元素尺寸變化.
這里也簡(jiǎn)單寫下我自己的理解, 同時(shí)也建議再看看更為詳細(xì)的原文.
完美的解決方案
完美(在此的定義): 性能可靠, 低耦合, 兼容瀏覽器.
先思考一個(gè)更簡(jiǎn)單的問題: 如何監(jiān)聽元素變高.
- 瀏覽器為了讓使用者有更好的閱讀體驗(yàn), 會(huì)記住當(dāng)前滾動(dòng)條的位置, 就算頁面的高度發(fā)生了變化.
- 滾動(dòng)的數(shù)值是滾動(dòng)出去的高度, 瀏覽器正是通過保持這個(gè)值不變?nèi)?shí)現(xiàn)保持元素的相對(duì)位置不變.
- 但也有例外會(huì)導(dǎo)致元素的相對(duì)位置改變, 如滾動(dòng)到最底部, 而高度變高, 為了讓底部不留白, 就需要減少當(dāng)前元素的滾動(dòng)數(shù)值. 這時(shí)候就會(huì)觸發(fā)onscoll事件.
至此 我們已經(jīng)成功實(shí)現(xiàn)了監(jiān)聽頁面或者元素變高的事件.
而怎么實(shí)現(xiàn)監(jiān)聽變矮的事件卻又是一個(gè)問題.
- 變矮的動(dòng)作下是怎么都不會(huì)出現(xiàn)上面必須修改滾動(dòng)值的例外情況的.
- 其實(shí)總結(jié)上面的規(guī)律即可得到: scrollTop+父元素的高度是一定小于等于子元素的高度的(既: scrollTop+parentHeight<=childrenHeight), 如果讓子元素的高度也發(fā)生變化并且超過父元素的高度變化, 那么scrollTop就會(huì)發(fā)生改變.
- 如何讓childrenHeight的變化數(shù)值大于parentHeight呢? 答案就是
height:150%. 其實(shí)只需要比100%大即可.
現(xiàn)在道理都懂了吧, 監(jiān)聽寬度改變也是同理.
代碼就看原文吧.
