javascript - ResizeObserver 可以只听宽度变化吗？

Question

我想仅在宽度更改时触发 ResizeObserver 而在高度更改时不使用它。可能吗？

例子：

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

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

Answer 1

没有内置函数，但您可以创建一个包装器来检查（仅）宽度是否已更改：

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);