React中如何判断滚动捕获页面的滚动状态及获取滚动值？

你遇到的核心问题是滚动事件和滚动值的载体不是window/body，而是设置了scroll-snap-type的滚动容器——因为scroll-snap布局通常是给某个内部容器开启滚动捕获，而非全局window。下面针对你的三个问题逐一解决：

1. 获取滚动捕获页面的滚动值 #

首先找到页面中设置了scroll-snap-type的容器（这才是实际的滚动载体），然后通过容器的scrollTop（纵向滚动）或scrollLeft（横向滚动）属性获取滚动值：

// 假设滚动容器的id是snap-container
const scrollContainer = document.getElementById('snap-container');
const scrollValue = scrollContainer.scrollTop; // 纵向滚动值
// 如果是横向滚动，用scrollLeft
// const scrollValue = scrollContainer.scrollLeft;

如果是React项目，你可以用useRef获取容器元素：

import { useRef, useEffect } from 'react';

function SnapPage() {
  const scrollContainerRef = useRef(null);

  useEffect(() => {
    const scrollContainer = scrollContainerRef.current;
    if (scrollContainer) {
      const handleScroll = () => {
        const scrollValue = scrollContainer.scrollTop;
        console.log('当前滚动值:', scrollValue);
      };
      scrollContainer.addEventListener('scroll', handleScroll);
      return () => scrollContainer.removeEventListener('scroll', handleScroll);
    }
  }, []);

  return (
    <div 
      ref={scrollContainerRef}
      style={{
        scrollSnapType: 'y mandatory',
        overflowY: 'scroll',
        height: '100vh' // 必须设置容器高度才能滚动
      }}
    >
      {/* 你的滚动区块，每个区块设置scroll-snap-align: start */}
      <div style={{ scrollSnapAlign: 'start', height: '100vh' }}>区块1</div>
      <div style={{ scrollSnapAlign: 'start', height: '100vh' }}>区块2</div>
    </div>
  );
}

2. 判断滚动捕获页面是否已滚动 #

通过滚动容器的scrollTop（或scrollLeft）是否大于0来判断：

const isScrolled = scrollContainer.scrollTop > 0;
// 横向滚动则判断scrollLeft > 0
// const isScrolled = scrollContainer.scrollLeft > 0;

你可以在滚动事件监听回调里实时判断这个状态，比如更新组件状态：

const [isScrolled, setIsScrolled] = useState(false);

// 在scroll事件回调中
const handleScroll = () => {
  setIsScrolled(scrollContainer.scrollTop > 0);
};

3. 判断滚动捕获页面是否处于顶部 #

当滚动容器的scrollTop等于0时，说明处于纵向滚动的顶部；横向滚动则判断scrollLeft等于0：

const isAtTop = scrollContainer.scrollTop === 0;
// 横向滚动：const isAtTop = scrollContainer.scrollLeft === 0;

同样可以在滚动事件中实时更新这个状态，用于页面逻辑判断（比如显示/隐藏回到顶部按钮）。

关键提醒 #

• 确保滚动容器设置了overflow: scroll（或overflow-y/overflow-x: scroll）以及固定高度/宽度，否则无法触发滚动。
• 不要监听window的scroll事件，因为滚动行为发生在内部容器上，window不会触发滚动事件。

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