React引用ScrollTop始终返回0

是因为在React中，ScrollTop是一个DOM属性，而不是一个React组件的状态。因此，使用React的ref属性引用ScrollTop时，无法获取到正确的滚动位置。

要解决这个问题，可以使用React的生命周期方法或钩子函数来监听滚动事件，并将滚动位置保存在组件的状态中。具体步骤如下：

在组件的构造函数中初始化一个滚动位置的状态变量，例如scrollTop: 0。
在组件挂载完成后，使用componentDidMount生命周期方法或useEffect钩子函数来添加滚动事件监听器。
在滚动事件监听器中，通过window.pageYOffset或document.documentElement.scrollTop获取当前的滚动位置，并将其更新到组件的状态中。
在组件卸载前，使用componentWillUnmount生命周期方法或useEffect钩子函数的返回函数来移除滚动事件监听器。

以下是一个示例代码：

import React, { Component, useEffect, useState } from 'react';

class ScrollComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollTop: 0
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    this.setState({ scrollTop });
  }

  render() {
    return (
      <div>
        <p>Scroll Top: {this.state.scrollTop}</p>
        {/* 其他组件内容 */}
      </div>
    );
  }
}

function ScrollComponentFunctional() {
  const [scrollTop, setScrollTop] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      setScrollTop(scrollTop);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      <p>Scroll Top: {scrollTop}</p>
      {/* 其他组件内容 */}
    </div>
  );
}

在上述示例中，ScrollComponent是一个类组件，而ScrollComponentFunctional是一个函数式组件。两者的实现方式略有不同，但都可以实现监听滚动事件并获取滚动位置的功能。

关于React中的滚动处理，可以参考以下腾讯云相关产品和文档：