Resize Observer使用
Resize Observer
是一个新的JavaScript API,与Intersection Observer API
、Mutation Observer
等其他观察者API非常相似。
它允许在尺寸发生变化时通知元素。
基本用法
使用Resize Observer非常简单,只需实例化一个新的ResizeObserver对象并传入一个回调函数,该函数接收观察到的条目
const myObserver = new ResizeObserver(entries => {// iterate over the entries, do something.
});
然后,我们可以在实例上调用observe
并传入一个元素来观察
const someEl = document.querySelector('.some-element');
const someOtherEl = document.querySelector('.some-other-element');myObserver.observe(someEl);
myObserver.observe(someOtherEl);
对于每个entry,我们都会得到一个包含contentRect
和一个target
属性的对象。target
是DOM元素本身,contentRect是具有以下属性的对象:width,height,x,y,top,right,bottom和left。
与元素的getBoundingClientRect
不同,contentRect
的width
和height
值不包含padding
。contentRect.top
是元素的顶部padding
,contentRect.left是元素的左侧padding
。
比如要打印出被监听元素寸尺变化时width
和height
的值,可以像下面这样做:
const myObserver = new ResizeObserver(entries => {entries.forEach(entry => {console.log('width', entry.contentRect.width);console.log('height', entry.contentRect.height);});
});const someEl = document.querySelector('.some-element');
myObserver.observe(someEl);
示例
下面是一个简单的演示,以查看Resize Observer API的实际应用。
通过调整浏览器窗口的大小来尝试一下,注意渐变角度和文本内容仅在元素的大小受到影响时才发生变化:
让我们来分解这个简单的演示。首先,我们从一些简单的标记开始:
<div class="box"><h3 class="info"></h3>
</div>
<div class="box small"><h3 class="info"></h3>
</div>
样式:
.box {text-align: center;height: 20vh;border-radius: 8px;box-shadow: 0 0 4px var(--subtle);display: flex;justify-content: center;align-items: center;
}.box h3 {color: #fff;margin: 0;font-size: 5vmin;text-shadow: 0 0 10px rgba(0,0,0,0.4);
}.box.small {max-width: 550px;margin: 1rem auto;
}
请注意,我们不需要将渐变背景应用于.box
元素。
当页面第一次加载时,resize观察者将被调用一次,然后我们将应用我们的渐变。
现在,当我们添加下面的JavaScript代码时,就会发生奇迹了:
const boxes = document.querySelectorAll('.box');const myObserver = new ResizeObserver(entries => {for (let entry of entries) {const infoEl = entry.target.querySelector('.info');const width = Math.floor(entry.contentRect.width);const height = Math.floor(entry.contentRect.height);const angle = Math.floor(width / 360 * 100);const gradient = `linear-gradient(${ angle }deg, rgba(0,143,104,1) 50%, rgba(250,224,66,1) 50%)`;entry.target.style.background = gradient;infoEl.innerText = `I'm ${ width }px and ${ height }px tall`;}
});boxes.forEach(box => {myObserver.observe(box);
});
在这里,我们使用for … of循环遍历观察者回调中的条目,但在条目上调用forEach将工作得一样。
请注意,我们还必须迭代可以观察的元素,并调用每个元素的观察值。
浏览器支持
浏览器支持现在非常糟糕,只有Chrome 64+支持Resize Observer开箱即用。
但是我们可以同时使用polyfill。
该polyfill基于MutationObserver API。
原文地址
Resize Observer使用相关推荐
- 现代浏览器观察者 Observer API 指南
前言 前段时间在研究前端异常监控/埋点平台的实现. 在思考方案时,想到了浏览器自带的观察者以及页面生命周期API . 于是在翻查资料时意外发现,原来现代浏览器支持多达四种不同类型的观察者: Inter ...
- vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
点击上方"前端公虾米"关注最新前端资讯 来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e ? 这五个轮子其实是5个纯j ...
- 浏览器内置对象 Web API 规则部分
B Background Fetch API (en-US) 后台获取可能需要很长时间,如电影,音频文件和软件下载的方法. Background Tasks 幕后任务协作调度 提供了由用户代理决定,在 ...
- 10个打开了我新世界大门的 WebAPI
原来我对这些 Web API 一无所知,打开了我新世界的大门,未来 Web 可以做到更多,早日一统江湖吧,吼吼吼. 虽然这些 API 很多目前还存在兼容性的问题,但是还是有必要了解一下的,文中的代码, ...
- 几个非常有意思的javascript API
作为一名前端爱好者, 笔者利用空余时间研究了几个国外网站的源码,发现不管是库,还是业务代码,都会用到了一些比较有意思的API,虽然平时在工作中部分接触过,但是经过这次的研究,觉得很有必要总结一下,毕竟 ...
- 几个非常有意思的javascript知识点总结
作为一名前端爱好者, 笔者利用空余时间研究了几个国外网站的源码,发现不管是库,还是业务代码,都会用到了一些比较有意思的API,虽然平时在工作中部分接触过,但是经过这次的研究,觉得很有必要总结一下,毕竟 ...
- ResizeObserver - 元素resize监听API
Motivation 响应式网站/Web应用程序 根据视口大小调整内容展示方式.这通常通过CSS和media查询来完成.当CSS表现不好我们会使用Javascript. 比如document.addE ...
- HTML5和Intersection Observer的响应式图像优化简介
by Riccardo Canella 里卡多·卡内拉(Riccardo Canella) HTML5和Intersection Observer的响应式图像优化简介 (An intro to res ...
- dom元素增加resize,以及echart增加resize
通过 vuex 实现 vue-echarts 图表的手动 resize 背景:项目有用到 vue-echarts, 百度推出的 vue 版本的 Echarts,图表自带响应式属性 auto-resiz ...
最新文章
- undefined reference to `libiconv_open 无法编译PHP libiconv
- 慢动作频闪怎么解决_Vlog的视频解决方案——索尼A6400
- 梅花桩上练真功,腾讯公布机器人移动技术探索新突破
- C++种子点搜索算法之线扫描方法的实现
- Caffe学习系列(16):各层权值参数可视化
- Maven 命令格式及一些常用命令
- LeetCode 1520. 最多的不重叠子字符串(贪心)
- 闭包造成的内存泄露怎么解决?
- python产生随机数列表_python如何产生10个不同的随机数
- mysql根据时间统计数据语句
- 如何在ViewModel中正确地使用Timer(定时器)
- C# 启动停止SQLServer数据库服务器
- mysql 多主一从备份_Linux下安装Mysql多实例作为数据备份服务器实现多主到一从多实例的备份 | 很文博客...
- 前端安全问题及解决方案
- 最新!谷歌浏览器去除CSDN广告插件
- 金融 数据库 mysql_MySQL 和 PostgreSQL 哪个更适合做金融数据库
- SQL Server解决18456错误方案
- LASSO回归与L1正则化 西瓜书
- 2022云南省职业院校技能大赛(高职组) Web技术(网站设计与开发)赛项规程
- Qt 调用ftd2x API上位机踩坑指南
热门文章
- SP2.0时代悄然来临 SPer脱胎换骨谋重生
- 从Matlab .fig文件中读取数据,并重新绘图
- android 获取用户名和密码,android从客户经理获取gmail用户名和密码
- 关于选择器权重导致的a:hover 失效问题
- OmniGraffle for Mac 7.16中文版 — 思维导图 流程图工具
- 利用GPU训练网络模型
- 大数据引领 开创发展新局面
- 4G 模块HTTP连接Web Server 提交数据到PHP
- 厨房(博客搬家,2007年写)
- 主机回来以及,简单的环境配置(RTX3070+CUDA11.1+CUDNN+TensorRT)