MacBook 上下滚动页面设计指南

为什么关注 MacBook 的滚动体验？

MacBook 用户习惯使用触控板进行流畅的惯性滚动（momentum scrolling），这与传统鼠标滚轮行为不同。为提供一致且舒适的浏览体验，网页应适配这种自然滚动方式。

基础实现方法（原生 HTML/CSS/JS）

• HTML 结构：保持语义化标签，合理使用 section、article 等元素划分内容区块。
• CSS 样式：避免禁用滚动（如 overflow: hidden），确保 body 可自然滚动；可使用 scroll-behavior: smooth 实现平滑滚动。
• JavaScript 增强：监听 wheel 或 scroll 事件实现视差、动画等效果，但需注意性能优化，避免卡顿。

最佳实践建议

• 保持内容纵向线性布局，减少横向干扰。
• 避免固定高度容器阻碍自然滚动。
• 在触控设备上慎用自定义滚动条，优先使用系统默认行为。
• 测试不同 macOS 版本和 Safari/Chrome 浏览器下的滚动表现。