在Lenis项目中实现水平与垂直滚动切换的技术实践

理解Lenis滚动容器的工作原理

Lenis是一个现代化的平滑滚动库，它通过创建自定义滚动容器来替代浏览器默认的滚动行为。在React/NextJS环境中使用Lenis时，开发者经常遇到如何正确配置滚动容器的问题。

核心问题分析

在NextJS应用中，开发者尝试实现以下功能：

1. 主布局使用垂直滚动
2. 特定子页面需要水平滚动
3. 两个滚动实例之间可能存在冲突

解决方案探索

错误尝试：直接传递ref作为内容

开发者最初尝试通过ref直接指定内容容器：

const ref = useRef<HTMLDivElement>(null)
<Lenis root options={{
  orientation: 'horizontal',
  gestureOrientation: 'both',
  content: ref.current,
}}

这种方法存在问题，因为ref.current在初始渲染时为null，且Lenis已经自动创建了内容容器。

正确方法：利用Lenis提供的ref访问内容

Lenis组件会自动创建内容元素，开发者可以通过ref访问：

const contentRef = useRef()

return (
  <Lenis ref={(ref) => {
    contentRef.current = ref?.content
  }}>
    {/* 内容 */}
  </Lenis>
)

NextJS中的最佳实践

1. 避免在根布局中定义Lenis：这会导致全局滚动控制，难以实现特定页面的特殊滚动需求。

2. 按页面需求单独配置Lenis：为需要特殊滚动行为的页面单独配置Lenis实例。

3. 滚动方向切换：通过设置orientation和gestureOrientation选项实现不同方向的滚动。

实现水平滚动页面的完整示例

function HorizontalPage() {
  return (
    <Lenis 
      root 
      options={{
        orientation: 'horizontal',
        gestureOrientation: 'both'
      }}
    >
      <div className="flex w-max h-full">
        {/* 水平滚动内容 */}
      </div>
    </Lenis>
  )
}

常见问题与注意事项

1. 避免多个root实例冲突：确保同一时间只有一个Lenis实例作为root运行。

2. 内容容器尺寸：水平滚动需要确保内容容器有足够的宽度（如使用w-max类）。

3. NextJS路由切换：在页面切换时，确保正确销毁和重建Lenis实例。

通过理解Lenis的工作原理和采用上述实践方法，开发者可以在NextJS应用中灵活实现各种滚动效果，包括垂直和水平滚动的无缝切换。