react 监听页面是否产生滚动条 hook

这次的需求依然是UI提出的 要求页面右侧不管含不含滚动条 间距都为16 一时间没有什么好的思路
只能用想到啥用啥了
以下为hook主体部分
刚开始用的resize 大部分页面是可以用的 但是有部分页面是可以手动添加数据的 页面自己数据变多了 产生了滚动条 但是并不会触发resize 只能撤掉resize 使用MutationObserver 目前看 算是完美解决问题

import { RefObject, useEffect, useState } from 'react';

function useScrollDetector(containerRef: RefObject<HTMLDivElement>): boolean {
  const [hasVerticalScroll, setHasVerticalScroll] = useState(false);

  useEffect(() => {
    const checkScroll = () => {
      if (containerRef.current) {
        const scrollContainer = containerRef.current;
        setHasVerticalScroll(
          scrollContainer.scrollHeight > scrollContainer.clientHeight,
        );
      }
    };

    checkScroll();

    // 使用 MutationObserver 监听容器内部的变化
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
          checkScroll();
        }
      });
    });
    // 由resize监听改为 MutationObserver 监听节点变化 用于检测页面手动操作后导致的页面出现滚动条
    if (containerRef.current) {
      observer.observe(containerRef.current, { childList: true, subtree: true });
    }

    return () => {
      if (containerRef.current) {
        observer.disconnect();
      }
    };

    // window.addEventListener('resize', checkScroll);

    // return () => {
    //   window.removeEventListener('resize', checkScroll);
    // };
  }, [containerRef]);

  return hasVerticalScroll;
}

export default useScrollDetector;

页面调用： 在顶层页面调用 实现全局

import { useScrollDetector } from '@/hooks'
const PageContainer = (props: PageContainerProps) => {
  const pageContainerRef = useRef<HTMLDivElement>(null);

  const hasScroll = useScrollDetector(pageContainerRef)

  const { children, header, backTop, ...otherProps } = props;
  return (
    <EnhancePageContainer
      {...otherProps}
      backIcon={<i className="iconfont icon-xiangzuo"></i>}
      header={{
        ...header,
        breadcrumb: {},
      }}
    >
      <div className="page-content scrollbar" ref={pageContainerRef} style={{paddingRight: hasScroll ? '6px' : '16px'}}>
        {children}
      </div>
      {backTop && (
        <BackTop
          visibilityHeight={0}
          target={() => pageContainerRef.current!}
          {...(typeof backTop === 'object' && backTop)}
        />
      )}
    </EnhancePageContainer>
  );
};
export default PageContainer;