如何使用React Page Scroller适配超过100vh的页脚并解决双滚动条问题

问题根因 #

这类布局下出现的两类冲突本质是滚动逻辑的权限边界不清晰：

• 把高度超过100vh的Footer放在Scroller内部时，Scroller会按每个子元素占满整屏的规则拆分滚动距离，超过视口高度的Footer会被强制拆成多个分页单元，触发不符合预期的区块切换
• 把Footer放在Scroller外部时，Scroller本身默认会接管window的滚动监听，同时原生页面会因为Footer的高度产生额外的垂直滚动条，两套滚动逻辑并行触发，就会出现双滚动条、滚动行为错乱的问题

预期交互对齐 #

• 所有常规100vh高度的业务区块保持原有整屏分页切换的流畅效果
• 滚动到最后一个业务区块时，继续向下可完整浏览超过100vh的Footer，Footer区域内保持原生滚动，不触发分页逻辑
• 从Footer区域向上滚动到顶时，自动恢复Scroller的分页切换能力，可向上切回之前的业务区块

实现步骤 #

1. 从根源消灭双滚动条
   • 给全局的body、页面根节点设置overflow: hidden，彻底关闭原生页面的默认垂直滚动能力，这是避免出现双滚动条的核心前提
   • 不要给Scroller的外层容器设置超过视口高度的固定尺寸，保持Scroller自身的滚动容器高度占满100vh视口即可
   • 记得关闭Scroller默认的window全局滚动监听，让它只对自身容器的滚动行为做出响应，从源头减少滚动逻辑的冲突
2. 调整组件嵌套结构
   不要把Footer直接作为Scroller的子节点，结构改造为外层统一滚动容器的模式：

   <div className="custom-scroll-container">
     <ReactPageScroller ref={scrollerRef} className="paged-part">
       <SomeComponent />
       <SomeComponent />
       <SomeComponent />
       <SomeComponent />
     </ReactPageScroller>
     <Footer />
   </div>
   

3. 做滚动逻辑的权限交接
   • 给外层的.custom-scroll-container设置overflow-y: auto，让它成为页面唯一的垂直滚动容器
   • 利用Scroller提供的onPageChange回调拿到当前所在页码，当判断到达最后一个业务区块（即页码为业务区块总数-1）时，开启滚动权限判断：
     • 若用户向下滚动、且Scroller容器已经滚到最后一个区块的底部边界，暂时屏蔽Scroller的滚动监听，让外层容器接管滚动，带动Footer向上移动展示，此时完全不触发Scroller的分页切换
     • 若用户在Footer区域向上滚动、且已经到达Footer的顶部边界，就把滚动监听的权限交还给Scroller，恢复其默认的分页切换逻辑
   • 滚动方向判断可通过原生wheel事件的deltaY值实现，设置10px左右的判断阈值，避免轻微滚动误触发
4. 细节避坑
   • Footer不需要单独设置内部滚动容器，让它的自然高度撑满外层滚动容器即可
   • 当滚动权移交到外层容器时，给Scroller的滚动容器临时设置overflow: hidden，避免两套滚动逻辑同时触发；当滚动权切回Scroller时，再给外层容器临时设置overflow: hidden
   • 不要依赖Scroller自带的“最后一页延伸滚动”配置，这类配置默认会把超出的高度计算成新的分页单元，无法实现Footer的连续原生滚动效果

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