当前位置：首页 > React

react实现全屏滚动

2026-01-27 05:20:42React

实现全屏滚动的 React 方案

全屏滚动（Full Page Scroll）是一种常见的网页交互效果，用户滚动鼠标或触摸屏幕时，页面会整屏切换。以下是几种实现方法：

使用 react-full-page 库

安装依赖：

npm install react-full-page

基本用法：

import { FullPage, Slide } from 'react-full-page';

function App() {
  return (
    <FullPage>
      <Slide>
        <div style={{ height: '100vh', background: 'red' }}>第一屏</div>
      </Slide>
      <Slide>
        <div style={{ height: '100vh', background: 'blue' }}>第二屏</div>
      </Slide>
    </FullPage>
  );
}

使用原生 CSS + React 实现

通过监听滚动事件和 CSS 定位实现：

import { useState, useEffect } from 'react';

function FullPageScroll({ children }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const handleWheel = (e) => {
      if (e.deltaY > 0) {
        setCurrentIndex(prev => Math.min(prev + 1, children.length - 1));
      } else {
        setCurrentIndex(prev => Math.max(prev - 1, 0));
      }
    };

    window.addEventListener('wheel', handleWheel);
    return () => window.removeEventListener('wheel', handleWheel);
  }, [children.length]);

  return (
    <div style={{ overflow: 'hidden', height: '100vh' }}>
      <div style={{ 
        transform: `translateY(-${currentIndex * 100}vh)`,
        transition: 'transform 0.5s ease'
      }}>
        {React.Children.map(children, child => (
          <div style={{ height: '100vh' }}>{child}</div>
        ))}
      </div>
    </div>
  );
}

使用 react-scroll 库

另一种轻量级方案：

npm install react-scroll

示例代码：

import { Link, animateScroll as scroll } from 'react-scroll';

function App() {
  return (
    <div>
      <Link to="section1" smooth={true} duration={500}>Section 1</Link>
      <div name="section1" style={{ height: '100vh' }}>第一屏</div>
      <div name="section2" style={{ height: '100vh' }}>第二屏</div>
    </div>
  );
}

触摸设备支持

对于移动端需要添加 touch 事件处理：

react实现全屏滚动

useEffect(() => {
  let startY = 0;

  const handleTouchStart = (e) => {
    startY = e.touches[0].clientY;
  };

  const handleTouchEnd = (e) => {
    const endY = e.changedTouches[0].clientY;
    if (startY - endY > 50) { // 上滑
      setCurrentIndex(prev => Math.min(prev + 1, children.length - 1));
    } else if (endY - startY > 50) { // 下滑
      setCurrentIndex(prev => Math.max(prev - 1, 0));
    }
  };

  window.addEventListener('touchstart', handleTouchStart);
  window.addEventListener('touchend', handleTouchEnd);

  return () => {
    window.removeEventListener('touchstart', handleTouchStart);
    window.removeEventListener('touchend', handleTouchEnd);
  };
}, [children.length]);