https://github.com/johnapache/observe-dom-resize

observe dom resize . dom resize observer
https://github.com/johnapache/observe-dom-resize

dom-observer dom-resize element-resize observe-dom-resize resize-observer

Last synced: about 1 year ago
JSON representation

observe dom resize . dom resize observer

• Host: GitHub
• URL: https://github.com/johnapache/observe-dom-resize
• Owner: JohnApache
• License: mit
• Created: 2019-08-01T08:51:14.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T06:00:41.000Z (over 3 years ago)
• Last Synced: 2025-03-18T06:02:59.086Z (about 1 year ago)
• Topics: dom-observer, dom-resize, element-resize, observe-dom-resize, resize-observer
• Language: JavaScript
• Homepage:
• Size: 198 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# observe-dom-resize

# DOM元素监听尺寸变化

*****

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

*****

## 安装方法

```javascript

    npm install observe-dom-resize

```

## 示例

### 监听dom尺寸变化

```javascript

    import {

        DOMObserver

        DOMObserverResize,

	    DOMObserveWidth,

        DOMObserveHeight

    } from 'observer-dom-resize';

    const someDom = document.querySelector('.some');

    // 监听dom尺寸变化

    const unObserver1 = DOMObserver('resize', someDom, () => {

        console.log('DOM 尺寸发生变化了')

    })

    // 监听Dom 的Width变化

     const unObserver2 = DOMObserveWidth(someDom, () => {

        console.log('DOM width发生变化了');

    }); // ===  DOMObserver('width', someDom, ()=> {})

    // 监听Dom 的Height变化

    const unObserver3 = DOMObserveWidth(someDom, () => {

        console.log('DOM height发生变化了');

    }); // ===  DOMObserver('height', someDom, ()=> {})

    // 监听Dom 的resize变化

    const unObserver4 = DOMObserveResize(some, () => {

        console.log('DOM 尺寸发生变化了');

    }); // ===  DOMObserver('resize', someDom, ()=> {})

    // 取消监听dom

    unObserver1(); unObserver2(); unObserver3(); unObserver4();

```

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