<main id="app">
<p>仅content-box区域的大小变动才会触发ResizeObserver，内容改变但区域大小不变时不会触发</p>
<p>此外，元素的位置以及transform造成的任何改变（即使content-box区域大小变动）都不会触发观察器</p>
<p>打开控制台，修改下面的参数查看效果</p>
<p>为了方便观察content-box区域，指定了css：background-clip: content-box</p>
<div>
<div id="example" v-html="html" :style="style"></div>
</div>
html: <input v-model="html" /><br />
border: <input v-model="border" /><br />
margin: <input v-model="margin" /><br />
padding: <input v-model="padding" /><br />
transform: <input v-model="transform" /><br />
top: <input v-model="top" /><br />
left: <input v-model="left" /><br />
</main>#example {
display: inline-block;
background-clip: content-box;
background-image: linear-gradient(to right, #e0eafc, #cfdef3);
}
// use Vue.js
Vue.createApp({
data() {
return {
html: "ResizeObserver Test",
border: "solid Salmon 4px",
margin: "8px",
padding: "8px",
top: "0px",
left: "0px",
transform: "scale(1,1) rotate(0deg)",
};
},
computed: {
style() {
return `
border: ${this.border};
margin: ${this.margin};
padding: ${this.padding};
position: relative;
top: ${this.top};
left: ${this.left};
transform: ${this.transform};
`;
},
},
}).mount("#app");
// 为了方便没有通过vue的钩子进行管理
const ro = new ResizeObserver((entries, observer) => {
for (let entry of entries) {
console.log(entry);
}
});
ro.observe(document.querySelector("#example"));
External CSS
This Pen doesn't use any external CSS resources.