在React中实现区块内正常滚动，或如何正确集成fullPage.js？

我明白你遇到的困扰——react-fullpage有时候确实会让人误以为它砍掉了原生fullPage.js的核心功能，但其实区块内滚动（也就是大家常说的scrollOverflow功能）是完全支持的，可能只是你没找对配置的方式。下面我给你两种可行的解决方案，还有React中使用fullPage.js的最佳实践：

方案一：用react-fullpage实现区块内滚动 #

首先，先确保你的react-fullpage是最新版本，旧版本可能存在功能缺失：

npm update @fullpage/react-fullpage

接下来，关键的点是：给需要内部滚动的section直接添加scrollOverflow={true}属性，同时给该section内部的容器设置固定高度和overflow样式。示例代码如下：

import ReactFullpage from '@fullpage/react-fullpage';

const FullPageDemo = () => (
  <ReactFullpage
    navigation={true}
    render={({ fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className="section">
            <h1>普通全屏区块</h1>
          </div>
          {/* 给这个section添加scrollOverflow属性 */}
          <div className="section" scrollOverflow={true}>
            {/* 内部容器必须设置高度才能触发滚动 */}
            <div className="scrollable-container">
              <h2>这个区块支持内部滚动</h2>
              {/* 模拟大量内容 */}
              {Array.from({ length: 25 }).map((_, idx) => (
                <p key={idx} className="scroll-item">
                  滚动测试内容 {idx + 1}
                </p>
              ))}
            </div>
          </div>
          <div className="section">
            <h1>第三个全屏区块</h1>
          </div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);

export default FullPageDemo;

对应的CSS样式：

.scrollable-container {
  height: 100%;
  overflow-y: auto;
  /* 可选：自定义滚动条样式，提升美观度 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
}

很多人容易犯的错误是把scrollOverflow加在全局配置里，而不是具体的section上，这就是你没找到该功能的原因~

方案二：直接使用原生fullPage.js（完全无功能阉割） #

如果你需要用到fullPage.js的全部高级功能（比如自定义滚动动画、更多回调函数、插件扩展），直接使用原生库配合React的useEffect会更灵活：

首先安装原生fullPage.js：

npm install fullpage.js

然后在组件中初始化和销毁实例：

import { useEffect, useRef } from 'react';
import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.min.css';

const NativeFullPageDemo = () => {
  const fullpageContainer = useRef(null);
  let fullpageInstance = null;

  useEffect(() => {
    // 初始化fullPage实例
    if (fullpageContainer.current) {
      fullpageInstance = new fullpage(fullpageContainer.current, {
        navigation: true,
        scrollOverflow: true, // 全局开启，也可以给特定section加类名单独控制
        // 这里可以添加所有原生fullPage.js的配置项
        onLeave: (origin, destination, direction) => {
          console.log(`离开区块 ${origin.index}，进入区块 ${destination.index}`);
        }
      });
    }

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      if (fullpageInstance) {
        fullpageInstance.destroy('all');
      }
    };
  }, []);

  return (
    <div ref={fullpageContainer}>
      <div className="section">
        <h1>原生fullPage普通区块</h1>
      </div>
      <div className="section">
        <div className="scrollable-container">
          <h2>原生fullPage内部滚动区块</h2>
          {Array.from({ length: 25 }).map((_, idx) => (
            <p key={idx} className="scroll-item">
              滚动测试内容 {idx + 1}
            </p>
          ))}
        </div>
      </div>
      <div className="section">
        <h1>第三个全屏区块</h1>
      </div>
    </div>
  );
};

export default NativeFullPageDemo;

最佳实践总结 #

• 如果只需要基础的全屏滚动+部分区块内部滚动，react-fullpage足够满足需求，只要记住给目标section添加scrollOverflow={true}；
• 如果需要复杂的自定义功能，直接用原生fullPage.js配合React的生命周期钩子是更优选择，完全匹配官方文档的所有功能；
• 不管用哪种方式，内部滚动的容器必须设置明确的高度（比如height: 100%），否则无法触发滚动行为。

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