Lenis平滑滚动插件在水平滚动场景下的触发问题

架构老林

2026-6-26

解决Lenis实现垂直滚轮控制水平画廊平滑滚动的问题

你当前的核心问题是手动监听wheel事件直接修改scrollLeft，这完全绕过了Lenis的平滑滚动逻辑，同时可能未给容器配置正确的横向滚动样式，导致Lenis无法正常接管滚动行为。以下是具体解决步骤：

1. 给滚动容器设置正确的CSS样式

要让容器支持横向滚动，必须确保内容超出容器宽度，同时开启横向溢出：

/* 方案1：inline-block + white-space */
main {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap; /* 强制子元素横向排列不换行 */
  height: 100vh; /* 占满视口高度，触发垂直滚轮操作 */
}
main img {
  display: inline-block;
  height: 100%;
  width: auto; /* 保持图片原始比例 */
}

/* 方案2：Flex布局（更推荐） */
main {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100vh;
}
main img {
  flex-shrink: 0; /* 防止图片被压缩变形 */
  height: 100%;
  width: auto;
}

2. 移除手动的wheel事件监听

你添加的window.addEventListener('wheel', ...)会直接硬改scrollLeft，完全跳过Lenis的平滑处理逻辑，必须删除这段代码。

3. 调整Lenis配置适配需求

保留核心配置的同时，添加滚动速度适配和手势方向设置，确保Lenis正确接管垂直滚轮控制水平滚动：

const scrollContainer = document.querySelector("main");

const lenis = new Lenis({
  orientation: 'horizontal',
  content: scrollContainer,
  wheelMultiplier: 1.2, // 调整此值适配滚动速度，按需增减
  smoothWheel: true, // 确保开启滚轮平滑效果
  gestureOrientation: 'vertical' // 指定用垂直手势控制水平滚动
});

lenis.on('scroll', (e) => {
  console.log(e);
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);