js怎样监听元素尺寸变化 ResizeObserver使用指南-js教程-PHP中文网

js怎样监听元素尺寸变化 ResizeObserver使用指南

尼克

发布： 2025-06-26 22:41:01

原创

756人浏览过

js监听元素尺寸变化的核心方法是使用resizeobserver，它通过回调函数在元素尺寸改变时执行操作。1. resizeobserver提供高效监听方式，避免传统window.onresize的性能问题；2. 用法简单，创建实例并指定回调函数后调用observe方法监听目标元素；3. 支持同时监听多个元素，根据变化动态调整布局；4. 可结合节流、防抖、减少dom操作和及时取消观察等技巧优化性能；5. 在react中可通过useeffect和useref实现组件挂载时监听及卸载时释放资源；6. 兼容性良好，老旧浏览器可引入polyfill支持；7. 实际应用如自适应卡片布局，可根据容器宽度动态调整每行卡片数量与宽度，实现响应式设计。

js怎样监听元素尺寸变化 ResizeObserver使用指南

JS监听元素尺寸变化，核心在于使用ResizeObserver，它能让你在元素尺寸改变时执行回调函数，从而实现动态布局或其他响应式操作。

ResizeObserver提供了一种高效、可靠的方式来监听元素尺寸变化，避免了传统window.onresize带来的性能问题。

ResizeObserver的基本用法

ResizeObserver的使用非常简单，只需要创建一个ResizeObserver实例，并指定一个回调函数，然后观察目标元素即可。下面是一个基本的代码示例：

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log('Element size:', cr.width, 'x', cr.height);
  }
});

const element = document.getElementById('myElement');
observer.observe(element);

登录后复制

这段代码会监听ID为myElement的元素的尺寸变化，并在控制台输出元素和尺寸信息。注意，回调函数接收一个entries数组，每个entry包含目标元素和它的尺寸信息。

如何处理复杂的布局场景？

实际开发中，布局往往非常复杂，可能需要监听多个元素的尺寸变化，并根据这些变化动态调整其他元素的样式。ResizeObserver可以同时观察多个元素：

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const target = entry.target;
    const width = entry.contentRect.width;

    if (target.id === 'sidebar') {
      // 根据sidebar宽度调整main content的padding
      const mainContent = document.getElementById('main-content');
      mainContent.style.paddingLeft = `${width + 20}px`;
    } else if (target.id === 'main-content') {
      // ... 其他逻辑
    }
  });
});

observer.observe(document.getElementById('sidebar'));
observer.observe(document.getElementById('main-content'));

登录后复制

在这个例子中，我们同时监听了sidebar和main-content的尺寸变化，并根据sidebar的宽度动态调整main-content的paddingLeft。这种方式可以灵活应对各种复杂的布局需求。

ResizeObserver的性能优化技巧

虽然ResizeObserver相比window.onresize性能更好，但频繁的尺寸变化仍然可能导致性能问题。以下是一些优化技巧：

节流（Throttling）和防抖（Debouncing）： 可以使用节流或防抖来限制回调函数的执行频率，避免过度渲染。

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const context = this;
    const currentTime = new Date().getTime();

    if (!timeoutId) {
      if (currentTime - lastExecTime >= delay) {
        func.apply(context, args);
        lastExecTime = currentTime;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(context, args);
          lastExecTime = new Date().getTime();
          timeoutId = null;
        }, delay);
      }
    }
  };
}

const observer = new ResizeObserver(throttle(entries => {
  // ... 你的回调逻辑
}, 100)); // 100ms节流

登录后复制

避免不必要的DOM操作： 尽量减少回调函数中的DOM操作，可以将计算结果缓存起来，只在必要时更新DOM。
及时取消观察： 如果元素不再需要监听，应及时调用observer.unobserve(element)或observer.disconnect()取消观察，释放资源。

ResizeObserver的兼容性问题及polyfill

ResizeObserver的兼容性相对较好，现代浏览器基本都支持。但对于一些老旧浏览器，可能需要使用polyfill。你可以使用resize-observer-polyfill：

npm install resize-observer-polyfill

登录后复制

然后在你的代码中引入polyfill：

import ResizeObserver from 'resize-observer-polyfill';

if (!window.ResizeObserver) {
  window.ResizeObserver = ResizeObserver;
}

// ... 你的代码

登录后复制

如何在React中使用ResizeObserver？

在React中使用ResizeObserver，可以使用useEffect hook：

import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const elementRef = useRef(null);

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      const width = entries[0].contentRect.width;
      console.log('Component width:', width);
      // ... 根据宽度更新state或props
    });

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      observer.disconnect(); // 组件卸载时取消观察
    };
  }, []); // 依赖为空数组，只在组件挂载和卸载时执行

  return <div ref={elementRef}>我的组件</div>;
}

export default MyComponent;

登录后复制

这个例子中，我们使用useRef获取组件的DOM元素，然后在useEffect中创建ResizeObserver并观察该元素。在组件卸载时，我们调用observer.disconnect()取消观察，避免内存泄漏。

实际应用场景：自适应卡片布局

一个常见的应用场景是自适应卡片布局。假设我们有一个卡片列表，希望每行显示的卡片数量能够根据容器的宽度自动调整。可以使用ResizeObserver来实现：

import React, { useState, useEffect, useRef } from 'react';

function CardList({ cards }) {
  const containerRef = useRef(null);
  const [cardWidth, setCardWidth] = useState(200); // 初始卡片宽度

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      const containerWidth = entries[0].contentRect.width;
      const cardsPerRow = Math.floor(containerWidth / cardWidth);
      // 假设卡片之间有10px的间距
      const newCardWidth = (containerWidth - (cardsPerRow - 1) * 10) / cardsPerRow;
      setCardWidth(newCardWidth);
    });

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div ref={containerRef} style={{ display: 'flex', flexWrap: 'wrap' }}>
      {cards.map(card => (
        <div
          key={card.id}
          style={{
            width: cardWidth,
            marginBottom: '10px',
            marginRight: '10px',
            border: '1px solid #ccc',
            padding: '10px',
            boxSizing: 'border-box',
          }}
        >
          {card.content}
        </div>
      ))}
    </div>
  );
}

export default CardList;

登录后复制

在这个例子中，我们监听容器的宽度变化，并根据宽度计算每行应该显示的卡片数量，然后动态调整卡片的宽度。这样就可以实现一个自适应的卡片布局。