如何实现网页的水平滚动（支持鼠标滚轮垂直滚动触发水平滚动）-js教程-PHP中文网

本文详解如何通过 css 和 javascript 实现“垂直滚动触发水平滚动”的交互效果，适用于作品集等横向布局场景，涵盖高度约束、overflow 设置、scrollleft 控制及 webflow 兼容方案。

本文详解如何通过 css 和 javascript 实现“垂直滚动触发水平滚动”的交互效果，适用于作品集等横向布局场景，涵盖高度约束、overflow 设置、scrollleft 控制及 webflow 兼容方案。

在现代创意类网站（如 Emily Garthwaite 的作品集）中，常见一种优雅的交互模式：用户使用鼠标滚轮向下滚动时，页面内容却以水平方向平滑移动——这并非原生浏览器行为，而是通过 JavaScript 拦截 wheel 事件并映射到 scrollLeft 实现的。

✅ 核心原理

浏览器默认仅响应 overflow-x: auto 的手动拖拽或点击滚动条，但不支持滚轮直接触发水平滚动。要实现“滚轮向下 → 内容向右滑动”，需：

Cutout.Pro抠图

一款提供AI自动抠图和背景移除能力的图片处理工具，可快速提取人物、商品等主体并支持批量处理视觉素材。

下载

禁用默认垂直滚动（防止页面跳动）；
监听 wheel 事件，将 deltaY 转换为 scrollLeft 增量；
确保容器具备明确宽度与 overflow-x: auto，且子元素为单行内联布局（如 display: flex 或 white-space: nowrap）。

? 基础 HTML + CSS 结构

<div class="horizontal-scroll-container">
  <div class="scroll-content">
    <section class="panel">作品 1</section><section class="panel">作品 2</section><section class="panel">作品 3</section><!-- 更多面板 -->
</div>
</div>

.horizontal-scroll-container {
  height: 100vh; /* 必须设置显式高度，否则无法约束 */
  overflow: hidden; /* 隐藏默认滚动条，交由 JS 控制 */
  scroll-behavior: smooth;
}

.scroll-content {
  display: flex;
  height: 100%;
  width: max-content; /* 关键：让容器宽度自适应所有子项总和 */
  scroll-behavior: smooth;
}

.panel {
  flex: 0 0 100vw; /* 每个面板占满视口宽度 */
  height: 100%;
  min-width: 100vw;
}

⚙️ JavaScript 控制滚动逻辑

const container = document.querySelector('.horizontal-scroll-container');
const content = document.querySelector('.scroll-content');

container.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止默认垂直滚动
  content.scrollLeft += e.deltaY * 1.5; // deltaY > 0 表示向下滚，向右滚动
});