监听元素宽高改变(element onResize)

问题

思考如何实现: 当元素宽度<100px的时候, 将其中的文字竖向排列, 否则横向排列.

1. window.onResize

元素的宽度改变不一定是由窗口大小改变导致的, 也可能是元素之间互相的影响, 所以监听窗口大小改变是行不通的.

2. 翻看浏览器API, 使用高级函数 ResizeObserver

只是实验功能, 浏览器支持一片问号.

browser compatibility

3. setInterval

是一个方法, 但太不高效和优雅, 不到万不得已不使用.

4. google / baidu

key: 监听dom元素大小改变.

搜之, 发现一个鬼才方案, 佩服这个脑洞: 通过添加超过元素本身大小的子元素, 监听元素的onScoll事件来实现监听width改变.

这是原文: 巧妙监测元素尺寸变化.

这里也简单写下我自己的理解, 同时也建议再看看更为详细的原文.

完美的解决方案

完美(在此的定义): 性能可靠, 低耦合, 兼容浏览器.

先思考一个更简单的问题: 如何监听元素变高.

• 浏览器为了让使用者有更好的阅读体验, 会记住当前滚动条的位置, 就算页面的高度发生了变化.
• 滚动的数值是滚动出去的高度, 浏览器正是通过保持这个值不变去实现保持元素的相对位置不变.
• 但也有例外会导致元素的相对位置改变, 如滚动到最底部, 而高度变高, 为了让底部不留白, 就需要减少当前元素的滚动数值. 这时候就会触发onscoll事件.

至此 我们已经成功实现了监听页面或者元素变高的事件.
而怎么实现监听变矮的事件却又是一个问题.

• 变矮的动作下是怎么都不会出现上面必须修改滚动值的例外情况的.
• 其实总结上面的规律即可得到: scrollTop+父元素的高度是一定小于等于子元素的高度的(既: scrollTop+parentHeight<=childrenHeight), 如果让子元素的高度也发生变化并且超过父元素的高度变化, 那么scrollTop就会发生改变.
• 如何让childrenHeight的变化数值大于parentHeight呢? 答案就是height:150%. 其实只需要比100%大即可.

现在道理都懂了吧, 监听宽度改变也是同理.

代码就看原文吧.