React应用中获取innerContainer元素滚动位置替代window.scrollY

这个场景我太熟悉了——当你把body设为overflow: hidden后，页面的滚动上下文就从全局window转移到了你的<div id="innerContainer">里，这时候window.scrollY自然就失效了（始终是0）。咱们可以通过以下步骤来实现类似window.scrollY的效果，同时修复你的滚动事件监听逻辑：

1. 用React Refs获取滚动容器的DOM元素 #

首先需要拿到innerContainer的真实DOM节点，在类组件里可以用createRef，函数组件用useRef：

类组件示例：

class YourComponent extends React.Component {
  // 创建ref
  innerContainerRef = React.createRef();

  render() {
    return (
      <div id="innerContainer" 
        ref={this.innerContainerRef}
        style={{ 
          overflow: 'auto', 
          height: '100vh', // 确保容器有固定高度才会滚动
          // 其他样式
        }}>
        {/* 你的页面内容 */}
      </div>
    );
  }
}

2. 监听容器自身的scroll事件，而非window的 #

把原来绑定在window上的滚动监听，换成绑定在innerContainer上，同时用容器的scrollTop属性代替window.scrollY——这个属性就是容器内部内容相对于顶部的滚动距离，和scrollY的行为完全一致。

完善类组件的生命周期方法：

componentDidMount() {
  const container = this.innerContainerRef.current;
  // 确保容器存在再添加监听
  if (container) {
    container.addEventListener('scroll', this.handleScroll);
  }
}

componentWillUnmount() {
  const container = this.innerContainerRef.current;
  // 组件卸载时移除监听，避免内存泄漏
  if (container) {
    container.removeEventListener('scroll', this.handleScroll);
  }
}

// 滚动事件处理函数
handleScroll = () => {
  const container = this.innerContainerRef.current;
  if (!container) return;

  // 这里就是你要的「容器版scrollY」
  const scrollPosition = container.scrollTop;

  // 接下来写你的逻辑：比如根据滚动位置添加类
  if (scrollPosition > 50) { // 假设滚动超过50px时添加类
    container.classList.add('scrolled');
    // 或者如果是给其他元素加类，就操作对应的DOM或state
  } else {
    container.classList.remove('scrolled');
  }
};

函数组件的写法（额外补充） #

如果你的组件是函数式的，用useRef和useEffect来实现：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const innerContainerRef = useRef(null);

  useEffect(() => {
    const container = innerContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const scrollPosition = container.scrollTop;
      // 你的滚动逻辑
      scrollPosition > 50 
        ? container.classList.add('scrolled') 
        : container.classList.remove('scrolled');
    };

    container.addEventListener('scroll', handleScroll);
    // 清理函数：移除监听
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div id="innerContainer" ref={innerContainerRef} style={{ overflow: 'auto', height: '100vh' }}>
      {/* 内容 */}
    </div>
  );
}

关键注意点 #

• 确保你的innerContainer有固定高度（比如height: 100vh）或者最大高度，否则它会被内容撑开，不会出现滚动条。
• scrollTop是元素的原生属性，和window.scrollY的单位都是像素，逻辑上可以直接替换使用。
• 一定要记得在组件卸载时移除滚动监听，不然会导致不必要的内存泄漏。

内容的提问来源于stack exchange，提问作者Darren