通过scroll事件来监控元素尺寸改变

原创 greenhand 随笔 工具 168阅读 2018-07-07 16:43:47 举报

已经有原生的ResizeObserver api来干这个事,但这个还太新,兼容性不行

巧妙监测元素尺寸变化

关键是滚动的规则

To scroll an element element to x,y optionally with a scroll behavior behavior (which is "auto" if omitted) means to:

Let box be element’s associated scrolling box.
If box has rightward overflow direction Let x be max(0, min(x, element scrolling area width - element padding edge width)).
If box has leftward overflow direction Let x be min(0, max(x, element padding edge width - element scrolling area width)).
If box has downward overflow direction Let y be max(0, min(y, element scrolling area height - element padding edge height)).
If box has upward overflow direction Let y be min(0, max(y, element padding edge height - element scrolling area height)).
Let position be the scroll position box would have by aligning scrolling area x-coordinate x with the left of box and aligning scrolling area y-coordinate y with the top of box.
If position is the same as box’s current scroll position, and box does not have an ongoing smooth scroll, abort these steps.
Perform a scroll of box to position, element as the associated element and behavior as the scroll behavior.

也可以利用iframe的resize事件来实现,iframe绝对定位,当元素尺寸变化时,iframe尺寸变化

在IE9中无效,因为IE9中尺寸改变引起scrollTop变化时不会触发scroll事件

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复