ResizeObserver 可以只监听宽度变化吗？

Question

我只想在宽度发生变化时触发 ResizeObserver，如果高度发生变化则不使用它。可能吗？

示例：

const resizeObserver = new ResizeObserver(setLayout);
resizeObserver.observe(layout.current);

const setLayout = () => {/*do something*/}

Answer 1

没有 built-in 函数，但您可以制作一个包装器来检查（仅）宽度是否已更改：

const ro = function($el, cb) {
  let last = $el.getBoundingClientRect();
  const observer = new ResizeObserver(function() {
    const data = $el.getBoundingClientRect();
    if(data.width !== last.width && data.height === last.height)
      cb();
    last = data;
  });
  observer.observe($el);
}

然后像这样使用它：

ro(layout.current, setLayout);

ResizeObserver 可以只监听宽度变化吗？

Can ResizeObserver listen just to width change?

javascript

next.js

resize-observer