问题
思考如何实现: 当元素宽度<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%大即可.
现在道理都懂了吧, 监听宽度改变也是同理.
代码就看原文吧.
