无法使用 React 挂钩将 react-perfect-scrollbar 与 scrollTop 定位

Question

我有一个对象数组正在 table 中使用 react-perfect-scrollbar 实例呈现。

代码如下：

const myComponent = ({ myArray }) => {      
  const scrollBarRef = useRef(null);
  useEffect(() => {
    const timer = setTimeout(() => {
      scrollBarRef.current.updateScroll()    
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    const timer2 = setTimeout(() => {
      scrollBarRef.current.scrollTop = 200;
    }, 2500);
    return () => clearTimeout(timer2);
  }, []);

  return (
    <div className="my-container">
      <PerfectScrollbar
        options={{ minScrollbarLength: 10, scrollYMarginOffset: 7 }}
        ref = {scrollBarRef}           
      >
        {myArray && myArray.map((row, idx) => (
          <Row
            key={idx}
            row={row}
          />
        ))}          
      </PerfectScrollbar>
    </div>

  )
}

我设置了定时器，以防它不能立即正确渲染，只是等一下，但无论有没有定时器，它都不起作用

Answer 1

如 this github answer 所述，这有效

import React, { useRef } from 'react'
import PerfectScrollbar from 'react-perfect-scrollbar'
import './styles.css'

const data = new Array(20).fill(0).map((_, i) => i)

export default function App() {
  const ps = useRef()

  function scrollTop() {
    const curr = ps.current
    if (curr) {
      curr.scrollTop = 0
    }
  }

  return (
    <div>
      <button onClick={scrollTop}>Scroll Top</button>
      <div className="container">
        <PerfectScrollbar containerRef={el => (ps.current = el)}>
          {data.map(e => (
            <div className="item" key={e}>
              {e}
            </div>
          ))}
        </PerfectScrollbar>
      </div>
    </div>
  )
}

Answer 2

为@user3808307 分享的内容添加更多内容。如果您有动态数据并想通过调整高度来更新滚动条。使用 useEffect 渲染组件。

const scrollRef = useRef<HTMLElement>(null); // I am using typescript

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = 0;
    }
  }, [data]);  // This is your data. Pass it as dependency to tell the scroll that every time there is a new data change please make `scrollTop` to zero.

通过以下方式让 PerfectScrollbar 知道它

  <PerfectScrollbar containerRef={(el) => { scrollRef.current = el; }}>
      ... // add content here
  </PerfectScrollbar>

希望大家觉得它有用 :)

无法使用 React 挂钩将 react-perfect-scrollbar 与 scrollTop 定位

Cannot position react-perfect-scrollbar with scrollTop using React hooks

scrollbar

reactjs

react-hooks