ResizeObserver视图观察器

ResizeObserver 视图观察器

监测DOM元素尺寸改变. 替换 resize事件监听

应用

• 监听用户全屏与非全屏切换
• 监听用户改变浏览器窗口大小
• 自适应页面开发

实战

	useEffect(() => {
		const callback = (entries, observer) => {
			entries.forEach(entry => {
				const { target, contentRect } = entry;

				// 处理元素尺寸变化
				// 当页面全屏/退出全屏时触发
				// contentRect包含了元素的新尺寸和位置信息
				console.log(`目标元素: ${target}`);
				const height = 1080 - 84;
				let transformY = `scaleY(${contentRect.height / height})`;
				console.log('transformY:', transformY);
				document.getElementById('contentTrueDom').style.transform = transformY;
				console.log(`宽度: ${contentRect.width}px`);
				console.log(`高度: ${contentRect.height}px`);
			});
		};
		const observer = new ResizeObserver(callback);
		observer.observe(document.getElementById('trueDom'));

	}, []);

相关文档

• MDN
• 实例