fullPage.js 中移动端滚动内容被导航栏遮挡的解决方案

在移动端网页开发中，我们经常会遇到一个棘手的问题：当页面内容需要滚动时，部分内容可能会被设备的导航栏或工具栏遮挡。这个问题在使用 fullPage.js 这样的全屏滚动库时尤为明显。

问题现象

当在移动设备（特别是 iOS 的 Safari 浏览器）上使用 fullPage.js 的 scrollOverflow 功能时，用户可能无法完全滚动到可滚动区域的底部。这是因为传统的 100vh（视口高度单位）计算方式没有考虑到移动设备浏览器中动态变化的视口尺寸。

技术背景

现代移动设备浏览器通常会有动态的导航栏和工具栏：

• 底部工具栏（包含前进/后退按钮等）
• 顶部地址栏
• 其他浏览器控件

这些元素会随着用户的交互（如滚动）而显示或隐藏，导致实际可视区域高度不断变化。传统的 vh 单位是基于静态的视口高度计算的，无法适应这种动态变化。

解决方案

fullPage.js 在 4.0.32 版本中引入了 dvh（动态视口高度）单位作为补充解决方案：

body:not(.fp-responsive) .fp-overflow {
    max-height: 100vh;
    max-height: 100dvh; /* 新增的动态视口高度解决方案 */
}

这种双保险的写法确保了：

1. 首先使用传统的 vh 单位保证向后兼容
2. 然后使用现代的 dvh 单位解决移动端动态视口问题

实现原理

dvh 是 CSS 新引入的动态视口单位，它能够：

• 自动计算当前可见的视口高度
• 考虑浏览器界面元素的动态变化
• 提供更精确的可用空间计算

相比传统的 vh，dvh 能更准确地反映用户实际可见的区域，避免了内容被遮挡的问题。

开发者建议

对于使用 fullPage.js 的开发者，建议：

1. 确保使用最新版本的 fullPage.js（4.0.32 或更高）
2. 在移动设备上测试 scrollOverflow 功能
3. 关注用户反馈，特别是关于内容可访问性的问题
4. 了解其他现代 CSS 视口单位（如 lvh, svh 等）以适应不同场景

这个改进虽然看似简单，但对于移动端用户体验的提升却非常重要，确保了用户能够完整访问页面中的所有内容。