Hi,are you ready?

准备好开始了?
那就与我们取得联系吧

有一个品牌项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声?

?址:

?话:

E-mail:

检测DOM尺寸变化JS API ResizeObserver简介

作者:admin 时间:2020-07-27

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9295

本文欢迎共享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用能够联络授权。

DOM元素的特点或许节点改变的检测,咱们能够运用MutationObserver目标,IE11 支撑,详细能够拜见“ 聊聊JS DOM改变的监听检测与运用 ”这篇文章。

可是假如咱们想要检测到DOM元素尺度改变,在曩昔是没有专门的API的,多凭借window目标上绑定resize事情。

可是DOM元素的尺度改变,有时分窗体的尺度没有改变也会触发。还有的时分窗体的尺度改变了,可是DOM元素的尺度并没有改变,window目标上绑定的resize事情就有些糟蹋。

由于以上一些原因,一个全新的API就出来了,便是ResizeObserver目标,专门用来调查DOM元素的尺度是否发作了改变。

这个API游览器支撑的十分敏捷,我记住上一年看的时分才chrome浏览器支撑,现在Firefox浏览器也支撑了,Safari也确定会支撑,估量不必多久就能够运用了。

假定页面上有个DOM元素,名叫eleZxx,则咱们想要在eleZxx尺度改变的时分做点什么事情,能够运用下面的JavaScript代码:

var ro = new ResizeObserver {
 const cr = entry.contentRect;
 console.log;
 console.log;
 console.log;
// 调查一个或多个元素
ro.observe;

此刻咱们在控制台就你呢个看到相似下图的成果:

entry.contentRect 回来的是一个DOMRect目标,例如的特点包含:

{
 x: 0
 y: 0
 width: 296
 height: 100
 top: 0
 right: 296
 bottom: 100
 left: 0
}

假如咱们给DOM元素设置个 padding:10px ,则宽高都会变小,一同 left 和 top 特点值变成了 10 。

{
 x: 10
 y: 10
 width: 276
 height: 100
 top: 10
 right: 286
 bottom: 110
 left: 10
}

这表明contentRect回来是content box,也便是内容区域的尺度。

我从Google Developers找了张content box示意图,拜见下图中心那部分:

一同也从旁边面说明晰,假如一个元素的content box的尺度没有发作改变,那么也是不会触发ResizeObserver调查履行的,哪怕你改变了元素的 padding 值,或许改变了元素的 border-width 边框尺度,都不会以为是DOM元素尺度改变了。

例如:

div {
 width: 200px; height:100px;
}

则上面这个div元素设置 padding:10px ,是没有不会触发ResizeObserver履行的。

Firefox浏览器中,entry还包含下面两个特点值,borderBoxSize目标和contentBoxSize目标。

entry.borderBoxSize
entry.contentBoxSize

都回来ResizeObserverSize目标,该目标打开为:

{ 
 inlineSize: 271,
 blockSize: 41
}

其间inlineSize表明内联元素摆放方向上的尺度,等同于CSS逻辑特点 inline-size ,在默许文档流下表明宽度;blockSize表明块级元素摆放方向上的尺度,等同于CSS逻辑特点 block-size ,在默许文档流下表明高度。

例如,有了ResizeObserver,咱们就能够检测 textarea 的resize拉伸行为了。

比方说 textarea 尺度拉伸的时分,咱们能够让边框的色彩不断改变起来。

如下GIF录屏作用所示:

相关代码如下:

var objResizeObserver = new ResizeObserver {
 var entry = entries[0];
 var cr = entry.contentRect;
 var target = entry.target;
 var angle =    ;
 target.style.borderImage = 'linear-gradient 1';
// 调查文本域元素
objResizeObserver.observe;

您能够狠狠地点击这儿: ResizeObserver完结textarea边框色彩变啊变demo

当元素里边的内容变多或变少的时分,假如没有把高度和宽度定死,则咱们能够经过调查元素的尺度是否有改变,而知道是否有交互行为发作。

例如,咱们在运用Ajax宣布谈论的时分,需要把谈论写入到现有的谈论列表,经过调查谈论容器的尺度改变,咱们就能够以为这个谈论交互现已完结,然后脱离详细的事务逻辑完结其他一些需求,例如数据埋点,咱们只需要调查特定容器尺度是否改变,然后发送埋点数据即可。长处是数据埋点无侵入,无需写入到事务逻辑中,十分灵敏,也利于日后保护。

当一个元素运用 display:none 进行躲藏的时分,也是会触发尺度改变的,所以也能够被观测到。

根据尺度的观测要比根据特点的观测要更精准。由于一个元素的躲藏可能是经过其他元素的特点改变触发的,例如其他元素增加了一个类名,这个类名正好能够影响当时元素的躲藏。

例如:

 button id= button 点击我 /button 
 img id= img src= ./mm.jpg 
button.active   img {
 display: none;
}

按钮元素增加类名 .active 会导致后边的图片躲藏,此刻经过MutationObserver调查图片特点或节点的改变是没有任何用的。

此刻应该运用ResizeObserver。

var objResizeObserver = new ResizeObserver {
 if .display == 'none') {
 console.log;
 } else {
 console.log;
// 调查图片元素
objResizeObserver.observe;

您能够狠狠地点击这儿: ResizeObserver与元素的显现和躲藏检测demo

点击demo页面的按钮,就能够看到图片的显隐作用,以及对应的状况改变的描绘。

Polyfill项目地址: https://github.com/juggle/resize-observer

理论上能够兼容到IE9浏览器,不过还需要引进其他Polyfill,IE11 以及其他现代浏览器直接引进项目JS就能够了。

发现最近精力没有曾经充分了,昨日睡九个多小时,晚上过了12点就困得不可,我细心考虑一下原因。应该是受疫情影响,出不了门,运动少了,指那种剧烈的流汗的运动,不是垂钓。

运动少了人的精力和注意力都开端渐渐的阑珊,不知道什么时分才干持续出去和搭档们一同去打篮球。

今日正好仍是妇女节,祝广阔女人开发者或设计者走出归于自己的一片六合。

本文为原创文章,欢迎共享,勿全文转载,假如真实喜爱,可保藏,永不过期,且会及时更新知识点及批改过错,阅览体会也更好。

本文地址: https://www.zhangxinxu.com/wordpress/?p=9295

返回列表

RELATED CASE

相关案例

广告设计

检测DOM尺寸变化JS API ResizeObserver简介

byzhangxinxu from https://www.zhangxinxu.com/wordpr...

Are you interested in ?

感兴趣吗?

有关我们服务的更多信息,请联系

与我们合作

与我们合作,您将会得到更成熟的品牌建设服务。我们以客户至上,同时也相互挑战,力求呈现最好的品牌建设成果。

品牌咨询热线:

TOP