如何在FullPage.js的指定区域实现正常滚动（无滚动吸附）？

问题描述 #

我正在做一个网站，需要实现这样的滚动效果：

• 前两个区域开启scroll snap滚动吸附，滚动时自动吸附到区域顶部
• 第三个高度为300vh的长区域支持自由滚动，不需要吸附

试过用FullPage.js的scrollOverflow: true;配置，但效果异常：要么卡在长区域动不了，要么在该区域内无法正常滚动，求解决办法。

解决方案（已验证可行） #

问题出在没引入FullPage.js配套的官方CSS文件，这个CSS是实现scrollOverflow功能的关键，缺失会导致滚动容器的样式逻辑混乱，进而出现滚动异常。

具体操作步骤： #

1. 先引入FullPage.js的CSS文件（以4.0.29版本为例）：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.css">
   

2. 初始化FullPage.js时给需要正常滚动的长区域所在的section配置scrollOverflow: true：

   new fullpage('#fullpage', {
     // 示例配置，可根据需求调整
     sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
     scrollOverflow: true
   });
   

3. 确保长区域的内容被正确包裹，FullPage.js会自动为其生成可滚动的容器，实现区域内自由滚动，同时不影响前两个区域的scroll snap效果。

原理说明 #

FullPage.js的scrollOverflow功能需要依赖官方CSS来处理滚动容器的定位、溢出样式，以及和父容器滚动吸附的协同逻辑。没有这个CSS，滚动容器的样式不完整，就会出现滚动卡顿、无法滚动的问题。

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