使用隐藏的iframe观察元素大小更改
使用隐藏的iframe观察元素大小更改
Node.js 其它杂项
共188Star
详细介绍
Observes resizing of an element using a hidden iframe.
Installation
npm i -S simple-element-resize-detector
Usage
import observeResize from 'simple-element-resize-detector';
// any DOM element that can have children
let element = document.createElement('div');
// listen for resize
observeResize(element, () => {
console.log('new size: ', {
width: element.clientWidth,
height: element.clientHeight
});
});
To stop observing resize events, simply remove the returned detector frame:
let detector = observeResize(el, () => {});
detector.remove();
// or, for better browser compatibility:
// detector.parentNode.removeChild(detector)
Notes
element
passed toobserveResize()
must haveposition: relative
style to be correctly observed, otherwise nearest relative ancestor will be observed instead.- This library uses
<iframe>
s to detect when an element resizes.<iframe>
s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.
License
MIT
-
817 Star
-
301 Star
-
1432 Star
-
1141 Star
-
346 Star
-
141 Star
-
0 Star
-
30 Star