项目作者: JohnApache

项目描述 :
observe dom resize . dom resize observer
高级语言: JavaScript
项目地址: git://github.com/JohnApache/observe-dom-resize.git
创建时间: 2019-08-01T08:51:14Z
项目社区:https://github.com/JohnApache/observe-dom-resize

开源协议:MIT License

下载


observe-dom-resize

DOM元素监听尺寸变化


该插件通过一定巧妙的策略,使得任意元素可以监听resize 事件, 通过事件驱动回调,相比MutationObserver 或者循环检查 性能更高, 兼容ie9以上所有浏览器


安装方法

  1. npm install observe-dom-resize

示例

监听dom尺寸变化

  1. import {
  2. DOMObserver
  3. DOMObserverResize,
  4. DOMObserveWidth,
  5. DOMObserveHeight
  6. } from 'observer-dom-resize';
  7. const someDom = document.querySelector('.some');
  8. // 监听dom尺寸变化
  9. const unObserver1 = DOMObserver('resize', someDom, () => {
  10. console.log('DOM 尺寸发生变化了')
  11. })
  12. // 监听Dom 的Width变化
  13. const unObserver2 = DOMObserveWidth(someDom, () => {
  14. console.log('DOM width发生变化了');
  15. }); // === DOMObserver('width', someDom, ()=> {})
  16. // 监听Dom 的Height变化
  17. const unObserver3 = DOMObserveWidth(someDom, () => {
  18. console.log('DOM height发生变化了');
  19. }); // === DOMObserver('height', someDom, ()=> {})
  20. // 监听Dom 的resize变化
  21. const unObserver4 = DOMObserveResize(some, () => {
  22. console.log('DOM 尺寸发生变化了');
  23. }); // === DOMObserver('resize', someDom, ()=> {})
  24. // 取消监听dom
  25. unObserver1(); unObserver2(); unObserver3(); unObserver4();

Note: DOMObserver type 只能为 resize, width, height