如果滚动条在 React 中可见，则使用 simplebar-react 的 usaga 更新信息

Question

我使用

simplebar-react

，我想在滚动条可见时获取信息。 我创建了一个自定义挂钩来捕获此信息

export const useIsScrollbarVisible = () => {
  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
  
  const scrollbarRef = useRef<HTMLElement>(null)

  useLayoutEffect(() => {
    setIsScrollbarVisible(!scrollbarRef?.current?.hidden || false);
  }, [])

  return {
    scrollbarRef,
    isScrollbarVisible
  }
}

以及用法

  const { isScrollbarVisible, scrollbarRef } = useIsScrollbarVisible();

      <Scrollbar scrollableNodeProps={{ ref: scrollbarRef }}>
        <Box {...(isScrollbarVisible && { pr: 3 })}>
          {...}
        </Box>
     </Scrollbar>

但如果滚动条可见或不可见，它不会更新信息。

Answer 1

看来问题可能与您检查滚动条是否可见的方式有关。您可以使用scrollHeight 和clientHeight 属性来确定滚动条是否可见，而不是依赖scrollbarRef?.current?.hidden。这是您的自定义挂钩的更新版本：

import { useState, useRef, useLayoutEffect } from 'react';

export const useIsScrollbarVisible = () => {
const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
const scrollbarRef = useRef<HTMLElement>(null);

useLayoutEffect(() => {
  const checkScrollbarVisibility = () => {
    const scrollbarNode = scrollbarRef?.current;
    if (scrollbarNode) {
     setIsScrollbarVisible(scrollbarNode.scrollHeight > 
      scrollbarNode.clientHeight);
    }
 };

checkScrollbarVisibility(); // Check on mount

// Update when the window is resized
window.addEventListener('resize', checkScrollbarVisibility);

// Clean up the event listener
  return () => {
     window.removeEventListener('resize', checkScrollbarVisibility);
  };
}, []);

return {
   scrollbarRef,
   isScrollbarVisible,
};
};

通过这种方法，挂钩将检查挂载时滚动条的可见性，并侦听窗口调整大小事件以更新可见性状态。请务必在您的特定设置中测试此修改，以确保它满足您的要求。