<p align="center">
<img width="160" src="https://user-images.githubusercontent.com/1519516/68546625-51e0f680-03d0-11ea-9955-9f0e1964ba0c.png" />
</p>
<h1 align="center">Resize Observer</h1>
<p align="center">
<img src="https://img.shields.io/circleci/project/github/juggle/resize-observer/v3.svg?logo=circleci&style=for-the-badge" />
<img src="https://img.shields.io/coveralls/github/juggle/resize-observer/v3.svg?logoColor=white&style=for-the-badge" />
<img src="https://img.shields.io/bundlephobia/minzip/@juggle/resize-observer.svg?colorB=%233399ff&style=for-the-badge" />
<img src="https://img.shields.io/npm/l/@juggle/resize-observer.svg?colorB=%233399ff&style=for-the-badge" />
</p>
---
A minimal library which polyfills the **ResizeObserver** API and is entirely based on the latest [Draft Specification](https://drafts.csswg.org/resize-observer-1/).
It immediately detects when an element resizes and provides accurate sizing information back to the handler. Check out the [Example Playground](//juggle.studio/resize-observer) for more information on usage and performance.
> The latest [Resize Observer specification](https://drafts.csswg.org/resize-observer-1/) is not yet finalised and is subject to change.
> Any drastic changes to the specification will bump the major version of this library, as there will likely be breaking changes. Check the [release notes](https://github.com/juggle/resize-observer/releases) for more information.
## Installation
``` shell
npm i @juggle/resize-observer
```
## Basic usage
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Body has resized!');
observer.disconnect(); // Stop observing
});
ro.observe(document.body); // Watch dimension changes on body
```
This will use the [ponyfilled](https://github.com/sindresorhus/ponyfill) version of **ResizeObserver**, even if the browser supports **ResizeObserver** natively.
## Watching multiple elements
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
console.log(`Element ${index + 1}:`, `${width}x${height}`);
});
});
const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el)); // Watch multiple!
```
## Watching different box sizes
The latest standards allow for watching different box sizes. The box size option can be specified when observing an element. Options include `border-box`, `device-pixel-content-box` and `content-box` (default).
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const [size] = entry.borderBoxSize;
console.log(`Element ${index + 1}:`, `${size.inlineSize}x${size.blockSize}`);
});
});
// Watch border-box
const observerOptions = {
box: 'border-box'
};
const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el, observerOptions));
```
*From the spec:*
> The box size properties are exposed as sequences in order to support elements that have multiple fragments, which occur in [multi-column](https://www.w3.org/TR/css3-multicol/#) scenarios. However the current definitions of content rect and border box do not mention how those boxes are affected by multi-column layout. In this spec, there will only be a single ResizeObserverSize returned in the sequences, which will correspond to the dimensions of the first column. A future version of this spec will extend the returned sequences to contain the per-fragment size information.
## Using the legacy version (`contentRect`)
Early versions of the API return a `contentRect`. This is still made available for backwards compatibility.
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const { width, height } = entry.contentRect;
console.log(`Element ${index + 1}:`, `${width}x${height}`);
});
});
const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el));
```
## Switching between native and polyfilled versions
You can check to see if the native version is available and switch between this and the polyfill to improve performance on browsers with native support.
``` js
import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
const ResizeObserver = window.ResizeObserver || Polyfill;
// Uses native or polyfill, depending on browser support.
const ro = new ResizeObserver((entries, observer) => {
console.log('Something has resized!');
});
```
To improve this even more, you could use dynamic imports to only load the file when the polyfill is required.
``` js
(async () => {
if ('ResizeObserver' in window === false) {
// Loads polyfill asynchronously, only if required.
const module = await import('@juggle/resize-observer');
window.ResizeObserver = module.ResizeObserver;
}
// Uses native or polyfill, depending on browser support.
const ro = new ResizeObserver((entries, observer) => {
console.log('Something has resized!');
});
})();
```
> Browsers with native support may be behind on the latest specification.
> Use `entry.contentRect` when switching between native and polyfilled versions.
## Resize loop detection
Resize Observers have inbuilt protection against infinite resize loops.
If an element's observed box size changes again within the same resize loop, the observation will be skipped and an error event will be dispatched on the window. Elements with undelivered notifications will be considered for delivery in the next loop.
```js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
// Changing the body size inside of the observer
// will cause a resize loop and the next observation will be skipped
document.body.style.width = '50%';
});
// Listen for errors
window.addEventListener('error', e => console.log(e.message));
// Observe the body
ro.observe(document.body);
```
## Notification Schedule
Notifications are scheduled after all other changes have occurred and all other animation callbacks have been called. This allows the observer callback to get the most accurate size of an element, as no other changes should occur in the same frame.
![resize observer notification schedule](https://user-images.githubusercontent.com/1519516/52825568-20433500-30b5-11e9-9854-4cee13a09a7d.jpg)
## How are differences detected?
To prevent constant polling, every frame. The DOM is queried whenever an event occurs which could cause an element to change its size. This could be when an element is clicked, a DOM Node is added, or, when an animation is running.
To cover these scenarios, there are two types of observation. The first is to listen to specific DOM events, including `resize`, `mousedown` and `focus` to name a few. The second is to listen for any DOM mutations that occur. This detects when a DOM node is added or removed, an attribute is modified, or, even when some text has changed.
This allows for greater idle time, when the application itself is idle.
## Features
- Inbuilt resize loop protection.
- Supports pseudo classes `:hover`, `:active` and `:focus`.
- Supports transitions and animations, including infinite and long-running.
- Detects changes which occur during animation frame.
- Includes support for latest draft spec - observing different box sizes.
- Polls only when required, then shuts down automatically, reducing CPU usage.
- Zero delay system - Notifications are batched and delivered immediately, before the next paint.
## Li
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
Zuny 文件展示系统 v3.1.0.zip (604个子文件)
source.cga 76KB
common.cgc 58KB
form.cgc 8KB
property.cgc 6KB
iconview.cgc 6KB
nav.cgc 5KB
desc.cgc 5KB
table.cgc 4KB
monaco.cgc 4KB
task.cgc 4KB
page.cgc 3KB
box.cgc 3KB
html.cgc 2KB
byterun.cgt 3KB
familiar.cgt 525B
light.cgt 289B
global.min.css 9KB
global.css 9KB
main.css 4KB
main.css 3KB
main.css 2KB
vflow.min.css 540B
vflow.css 499B
form.min.css 428B
flow.min.css 413B
form.css 387B
block.min.css 373B
flow.css 372B
panel.css 357B
block.css 334B
dom.min.css 311B
dom.css 270B
button.min.css 233B
button.css 192B
global.min.css 108B
list.min.css 103B
main.min.css 97B
form.min.css 91B
global.css 77B
list.css 62B
form.min.css 61B
main.css 56B
form.css 50B
form.css 20B
.editorconfig 115B
.htaccess 218B
说明.htm 4KB
license.th.html 12KB
license.ru.html 9KB
license.vi.html 6KB
license.ja.html 6KB
license.ko.html 5KB
license.fr.html 5KB
license.es.html 5KB
license.en.html 5KB
license.pt.html 5KB
license.de.html 5KB
license.tc.html 4KB
license.sc.html 4KB
index.html 12B
index.html 6B
index.html 6B
index.html 6B
index.html 6B
img.jpg 10KB
vue.global.js 628KB
vue.esm-browser.js 598KB
vue.runtime.global.js 425KB
vue.runtime.esm-browser.js 400KB
jszip.js 365KB
vue.esm-browser.min.js 213KB
vue.global.min.js 164KB
vue.runtime.esm-browser.min.js 140KB
vue.esm-browser.prod.js 129KB
vue.esm-browser.prod.min.js 128KB
vue.global.prod.js 126KB
vue.global.prod.min.js 126KB
vue.runtime.global.min.js 112KB
jszip.min.js 95KB
vue.runtime.esm-browser.prod.js 83KB
vue.runtime.esm-browser.prod.min.js 82KB
vue.runtime.global.prod.js 82KB
vue.runtime.global.prod.min.js 82KB
form.js 80KB
task.js 64KB
dom.js 62KB
fs.js 51KB
main.js 47KB
loader.js 44KB
form.min.js 43KB
task.min.js 32KB
dom.min.js 29KB
core.js 26KB
fs.min.js 26KB
resize-observer.umd.js 21KB
tool.js 20KB
control.js 19KB
ZipFileWorker.js 17KB
main.js 17KB
utils.js 16KB
共 604 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
小小姑娘很大
- 粉丝: 4116
- 资源: 2349
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功