如何在react-simplebar中获取滚动属性(在有状态函数中)

npm install react-simplebar

import SimpleBar from 'react-simplebar';
import 'react-simplebar/dist/simplebar.min.css';

import React, { useEffect, useRef } from 'react';
import SimpleBar from 'react-simplebar';
import 'react-simplebar/dist/simplebar.min.css';

const MyComponent = () => {
  const simpleBarRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      // 获取滚动属性
      const scrollLeft = simpleBarRef.current.scrollLeft;
      const scrollTop = simpleBarRef.current.scrollTop;
      const scrollDirection = simpleBarRef.current.direction;

      // 处理滚动属性
      console.log('滚动位置：', scrollLeft, scrollTop);
      console.log('滚动方向：', scrollDirection);
    };

    // 监听滚动事件
    simpleBarRef.current.getScrollElement().addEventListener('scroll', handleScroll);

    // 清除监听
    return () => {
      simpleBarRef.current.getScrollElement().removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <SimpleBar ref={simpleBarRef}>
      {/* 内容 */}
    </SimpleBar>
  );
};

export default MyComponent;