跟踪 React 中组件的滚动位置

Question

我有一个组件，其中有一个带有 overflow: auto 的 main 标签。根据滚动高度，我需要呈现不同的元素。如何在 React 中获取元素滚动位置？

基本要点是这样的：

function App() {
  return (
    <div>
      <main
        style={{
          backgroundColor: "red",
          overflow: "auto",
          height: "500px",
          padding: "5px"
        }}
      >
        Please Track Me!
        <div
          style={{ backgroundColor: "blue", color: "white", height: "5000px" }}
        >
          Inner
        </div>
      </main>
    </div>
  );
}

我需要以某种方式跟踪 main（使用 overflow: auto）的滚动位置。

Answer 1

您的主要组件必须有一个参考。 https://reactjs.org/docs/refs-and-the-dom.html 您还将在组件中使用一个名为 onScroll 的事件来更新它。检查一下

class ScrollAwareDiv extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
    this.state = {scrollTop: 0}
  }

  onScroll = () => {
    const scrollY = window.scrollY //Don't get confused by what's scrolling - It's not the window
    const scrollTop = this.myRef.current.scrollTop
    console.log(`onScroll, window.scrollY: ${scrollY} myRef.scrollTop: ${scrollTop}`)
    this.setState({
      scrollTop: scrollTop
    })
  }

  render() {
    const {
      scrollTop
    } = this.state
    return (
      <div
        ref={this.myRef}
        onScroll={this.onScroll}
        style={{
          border: '1px solid black',
          width: '600px',
          height: '100px',
          overflow: 'scroll',
        }} >
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
      </div>
    )
  }
}

ReactDOM.render(
  <ScrollAwareDiv />,
  document.getElementById('root')
);

https://codepen.io/JohnReynolds57/pen/NLNOyO

Answer 2

不使用 refs 其实很容易。下面的例子是打字稿。

元素：

<div onScroll={this.scrollEvent}></div>

方法：

 scrollEvent(e: SyntheticEvent) {
    const target = e.target as HTMLTextAreaElement;
    console.log('Current scroll position:', target.scrollTop);
}

Answer 3

您可以在滚动时跟踪组件

export default function App() {
  const [scroll, setScroll] = useState(0);
  const onScroll = () => {
    const scrollY = window?.scrollY;
    const scrollTop = document.getElementById("test").scrollTop;

    setScroll(scrollTop);
  };
  return (
    <div className="App">
      <h1>Scroll Position {scroll}</h1>
      <div
        id="test"
        onScroll={onScroll}
        style={{
          backgroundColor: "white",
          zIndex: "100",
          height: "200px",
          overflowY: "scroll"
        }}
      >
        content...
      </div>
    </div>
  );
}

Code

跟踪 React 中组件的滚动位置

Tracking scroll position of a component in React

scroll

position

scrollbar

reactjs