1 Star 1 Fork 0

小为 / size-sensor

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

size-sensor

DOM element size sensor which will callback when the element size changed.

DOM 元素尺寸监听器,当元素尺寸变化的时候,将会触发回调函数!

Build Status npm npm gzip

Install

npm i --save size-sensor

Then import it.

import { bind, clear } from 'size-sensor';

or import it by script in HTML, then get sizeSensor on window.

<script src="https://unpkg.com/size-sensor/dist/size-sensor.min.js"></script>

Usage

  • bind & unbind
import { bind, clear } from 'size-sensor';

// bind the event on element, will get the `unbind` function
const unbind1 = bind(document.querySelector('.container'), element => {
  // do what you want to to.
});

const unbind2 = bind(document.querySelector('.container'), element => {
  // do what you want to to.
});

// if you want to cancel bind event.
unbind1();
  • clear
import { bind, clear } from 'size-sensor';

/*
 * // bind the resize event.
 * const unbind1 = bind(...);
 * const unbind2 = bind(...);
 * ...
 */

// you can cancel all the event of element.
clear(element);

API

There is only 2 API:

  • bind(element, callback)

Bind the resize trigger function on element. The function will return unbind function.

  • clear(element)

Clear all the object and resize event on element.

Strategies

The size sensor strategies include:

  • ResizeObserver: use resizeObserver to observe element's size.
  • object: use object document's resize event.

If ResizeObserver exists, use it, else use object as default.

Let me know

Online demo click here. Used By:

License

ISC@hustcc.

简介

:herb: 1Kb DOM element size sensor which will callback when size changed. 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/hustcc/size-sensor.git
git@gitee.com:hustcc/size-sensor.git
hustcc
size-sensor
size-sensor
master

搜索帮助