本文详解如何通过 CSS 和 JavaScript 实现类似 Emily Garthwaite 作品集网站的“垂直滚动触发水平滚动”交互效果，涵盖容器尺寸控制、overflow-x 正确启用、scrollLeft 编程控制及防抖优化等关键实践。
本文详解如何通过 css 和 javascript 实现类似 emily garthwaite 作品集网站的“垂直滚动触发水平滚动”交互效果，涵盖容器尺寸控制、`overflow-x` 正确启用、`scrollleft` 编程控制及防抖优化等关键实践。
要让页面在用户向下滚动（垂直）时，自动触发内容的水平位移（如横向轮播式浏览），本质上并非单纯依赖 overflow-x: auto —— 因为原生鼠标滚轮默认只影响垂直滚动轴。真正起作用的是 JavaScript 监听 wheel 事件 + 手动控制 element.scrollLeft，配合精确的容器布局约束。
✅ 核心前提：确保水平滚动容器可生效
overflow-x: auto 或 scroll 只有在容器宽度固定且内容总宽度超出该宽度时才显示滚动条。常见错误是容器未设明确宽度/高度，或父级存在 overflow: hidden 干扰。推荐基础结构如下：
<div class="horizontal-scroller" style="width: 100vw; height: 100vh; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
<div class="scroller-content" style="display: inline-block;">
<section style="width: 100vw; display: inline-block;">Section 1</section><section style="width: 100vw; display: inline-block;">Section 2</section><section style="width: 100vw; display: inline-block;">Section 3</section>
</div>
</div>
⚠️ 注意：height 必须显式设置（如 100vh），否则 overflow-x 在部分场景下可能失效；同时禁用 overflow-y 防止出现双滚动条干扰体验。
✅ 关键实现：用 JavaScript 将垂直滚动映射为水平位移
监听 wheel 事件，阻止默认垂直滚动行为，并将 deltaY 转换为 scrollLeft 增量：
const scroller = document.querySelector('.horizontal-scroller');
scroller.addEventListener('wheel', (e) => {
e.preventDefault(); // 阻止默认垂直滚动
scroller.scrollLeft += e.deltaY; // 向下滚动 → 向右滑动；向上滚动 → 向左滑动
});
如需更平滑、可控的效果（例如限制最大滚动范围、添加缓动），可升级为：
let isScrolling = false;
scroller.addEventListener('wheel', (e) => {
e.preventDefault();
if (isScrolling) return;
isScrolling = true;
const targetX = Math.max(0, Math.min(
scroller.scrollWidth - scroller.clientWidth,
scroller.scrollLeft + e.deltaY * 1.5 // 放大灵敏度
));
scroller.scrollTo({
left: targetX,
behavior: 'smooth' // 可选：启用原生平滑滚动（注意兼容性）
});
// 防抖重置
setTimeout(() => { isScrolling = false; }, 150);
});
⚠️ Webflow 用户特别提示
Webflow 默认不支持自定义 wheel 事件拦截，需通过 Custom Code → Before
