如何实现网页的水平滚动与垂直滚动联动效果-js教程-PHP中文网

如何实现网页的水平滚动与垂直滚动联动效果

本文详解如何通过 css 和 javascript 实现类似 emily garthwaite 作品集网站的“垂直滚动触发水平滚动”交互效果，涵盖容器约束、scrollleft 控制、事件监听及 webflow 环境下的适配方案。

本文详解如何通过 css 和 javascript 实现类似 emily garthwaite 作品集网站的“垂直滚动触发水平滚动”交互效果，涵盖容器约束、scrollleft 控制、事件监听及 webflow 环境下的适配方案。

实现“滚动页面时自动横向滑动内容”的核心并非单纯依赖 overflow-x: auto，而是通过 JavaScript 监听垂直滚动（wheel 或 scroll 事件），动态控制容器的 scrollLeft 值，从而将用户纵向滚动行为映射为横向位移。这种效果常见于创意型作品集网站，能增强视觉叙事感。

关键原理：用垂直滚动驱动水平位移

浏览器原生不支持“垂直滚轮触发水平滚动”，需手动绑定事件并计算偏移量。基本逻辑如下：

FlagEval

FlagEval是一款AI模型评测工具，（天秤）大模型评测平台，由智源研究院推出。

下载

设置一个固定高度的容器（如 height: 100vh），隐藏纵向溢出（overflow-y: hidden）；
内部内容宽度超出容器，启用横向滚动（overflow-x: scroll 或 scrollLeft 可控）；
监听容器或 window 的 wheel 事件，根据 deltaY 累加 scrollLeft，实现平滑水平滑动。

示例代码（纯 HTML/CSS/JS）

<div class="horizontal-scroller" id="scroller">
  <div class="content">
    <section style="width: 300vw; display: flex; height: 100vh;"><div style="width: 100vw; background: #f0f0f0;">Section 1</div>
      <div style="width: 100vw; background: #e0e0e0;">Section 2</div>
      <div style="width: 100vw; background: #d0d0d0;">Section 3</div>
    </section>
</div>
</div>

<style>
.horizontal-scroller {
  height: 100vh;
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  overflow-x: hidden; /* 避免双滚动条干扰 */
}
.content {
  width: max-content;
  height: 100%;
}
</style><script>
const scroller = document.getElementById('scroller');
let scrollPos = 0;

scroller.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止默认垂直滚动
  scrollPos += e.deltaY * 1.5; // 缩放系数调节灵敏度
  scrollPos = Math.max(0, Math.min(scrollPos, scroller.scrollWidth - scroller.clientWidth));
  scroller.scrollLeft = scrollPos;
});
</script>

✅ 注意事项：

必须显式设置容器高度（如 100vh），否则 scrollWidth 与 clientWidth 计算失准；

使用 e.preventDefault() 是关键，否则浏览器会优先执行默认垂直滚动；

deltaY 为负值表示向上滚动，正值为向下——我们统一将其转为向右滚动方向；

在 Webflow 中，因框架限制无法直接插入自定义滚动逻辑，建议将该区域设为「Custom Code Embed」区块，并禁用 Webflow 默认滚动交互。