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
• 实例