本教程详细阐述如何利用 jquery 和 css 创建一个响应鼠标滚轮事件的水平滚动页面。我们将通过 css 的 `display: inline-block` 和 `white-space: nowrap` 构建横向布局，并结合 jquery 监听 `wheel` 事件，通过 css `transform: translatex` 实现平滑的滚动动画。文章还将重点介绍如何计算并实现滚动边界检测，确保用户无法过度滚动，从而提供流畅且受控的用户体验。
在现代网页设计中，水平滚动效果为用户提供了独特的浏览体验，尤其适用于展示一系列内容或产品。通过巧妙结合 CSS 布局与 jQuery 的事件处理能力，我们可以实现一个由鼠标滚轮驱动的平滑水平滚动页面，并加入必要的边界检测以优化用户体验。
1. HTML 结构：构建可滚动的区块
首先，我们需要一个清晰的 HTML 结构来承载水平滚动的各个内容区域。通常，我们会使用一个容器元素包裹多个“section”或“slide”元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平滚动教程</title>
<link rel="stylesheet" href="style.css">
<!-- 引入 jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="scroll-sections">
<section id="section-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>第一部分</h1>
<p>这是第一部分的内容。</p>
</div>
</div>
</div>
</section>
<section id="section-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>第二部分</h1>
<p>这是第二部分的内容。</p>
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>第三部分</h1>
<p>这是第三部分的内容。</p>
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>第四部分</h1>
<p>这是第四部分的内容。</p>
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>第五部分</h1>
<p>这是第五部分的内容。</p>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>请注意，我们引入了 jQuery 库，并且 scroll-sections 容器内包含多个 section 元素，每个 section 代表一个独立的滚动内容区块。
2. CSS 样式：实现水平布局与平滑过渡
CSS 是实现水平布局和视觉平滑度的关键。我们将利用 display: inline-block 将各个 section 排列在一行，并通过 white-space: nowrap 防止它们换行。同时，为了实现平滑的滚动效果，我们会为 scroll-sections 容器添加 transition-duration 属性。
立即学习“前端免费学习笔记（深入）”；
/* style.css */
html, body {
margin: 0;
overflow: hidden; /* 隐藏默认的垂直滚动条，防止冲突 */
height: 100%;
width: 100%;
}
.scroll-sections {
white-space: nowrap; /* 确保所有子元素都在一行显示 */
height: 100%;
position: relative; /* 为 transform 动画提供定位上下文 */
font-size: 0; /* 消除 inline-block 元素之间的默认间距 */
transition-duration: 0.5s; /* 设置 CSS 动画过渡时间，使滚动更平滑 */
transition-property: transform; /* 只对 transform 属性应用过渡效果 */
}
section {
height: 99vh; /* 确保每个区块占据几乎整个视口高度 */
display: inline-block; /* 使区块水平排列 */
width: 33.333%; /* 示例：每个区块占据视口宽度的三分之一 */
vertical-align: top; /* 垂直对齐 inline-block 元素 */
font-size: 1rem; /* 恢复内容字体大小 */
/* border: 1px solid #ccc; /* 可选：用于可视化区块边界 */
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素总宽度 */
display: flex; /* 使用 flexbox 居中内容 */
justify-content: center;
align-items: center;
}
/* 示例内容样式，可根据需要调整 */
.container {
width: 90%;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 3em;
color: #333;
}
p {
font-size: 1.2em;
color: #666;
}
/* 为不同 section 添加背景色以便区分 */
#section-1 { background-color: #f0f8ff; }
#section-2 { background-color: #e0ffff; }
#section-3 { background-color: #f5f5dc; }
#section-4 { background-color: #fffacd; }
#section-5 { background-color: #faebd7; }关键点说明：
- html, body { overflow: hidden; }：这非常重要，它禁用了浏览器默认的垂直滚动行为，避免与我们的自定义水平滚动冲突。
- .scroll-sections { white-space: nowrap; font-size: 0; }：white-space: nowrap 强制所有 section 保持在同一行，font-size: 0 则用于消除 inline-block 元素之间因空格或换行符产生的默认间距。
- .scroll-sections { transition-duration: 0.5s; transition-property: transform; }：当 transform 属性发生变化时，CSS 会在 0.5 秒内平滑过渡，从而实现流畅的滚动动画。
- section { width: 33.333%; }：这里设置每个区块占据视口宽度的三分之一。您可以根据设计需求调整此值，例如设置为 100vw 实现全屏滚动。
3. JavaScript 逻辑：鼠标滚轮事件与边界检测
接下来，我们使用 jQuery 来监听鼠标滚轮事件，并根据滚轮方向调整 scroll-sections 容器的 transform: translateX 属性，同时实现关键的边界检测。
// script.js
$(document).ready(function(){
var currentScrollPos = 0; // 当前的滚动位置，初始为0（最左侧）
var $scrollSections = $(".scroll-sections");
var $lastSection = $scrollSections.children().last();
// 计算最大可滚动距离（最右侧边界）
// 逻辑：视口宽度 - 所有 section 的总宽度
// 当 translateX 等于这个值时，表示最右侧的 section 刚好显示在视口最右侧
function calculateMaxScroll() {
var totalSectionsWidth = 0;
$scrollSections.children('section').each(function() {
totalSectionsWidth += $(this).outerWidth(true); // 包含 margin, padding, border
});
return $(window).width() - totalSectionsWidth;
}
var maxScroll = calculateMaxScroll();
// 监听鼠标滚轮事件
// 'wheel' 事件是现代浏览器推荐的事件，兼容性比 'mousewheel' 和 'DOMMouseScroll' 更好
$scrollSections.on('wheel', function(event) {
// event.originalEvent.wheelDelta 适用于 Chrome/Safari
// event.originalEvent.deltaY 适用于 Firefox (负值表示向上滚动，正值表示向下滚动)
// 统一处理滚轮方向：向上滚动（wheelDelta > 0 或 deltaY < 0）向右移动内容
// 向下滚动（wheelDelta < 0 或 deltaY > 0）向左移动内容
var delta = event.originalEvent.wheelDelta || -event.originalEvent.deltaY;
// 根据滚轮方向调整滚动位置
// delta / 3 用于调整滚动速度，可根据需要修改
currentScrollPos += (delta / 3);
// 边界检测：防止过度滚动
if (currentScrollPos > 0) {
currentScrollPos = 0; // 滚动到最左侧边界
}
if (currentScrollPos < maxScroll) {
currentScrollPos = maxScroll; // 滚动到最右侧边界
}
// 应用 CSS transform 实现水平滚动
$scrollSections.css({'transform': 'translateX(' + currentScrollPos + 'px)'});
// 阻止默认的滚动行为（例如页面的垂直滚动）
return false;
});
// 窗口大小调整时重新计算最大滚动距离
$(window).on('resize', function() {
maxScroll = calculateMaxScroll();
// 调整窗口后，如果当前位置超出边界，将其修正到最近的边界
if (currentScrollPos > 0) {
currentScrollPos = 0;
} else if (currentScrollPos < maxScroll) {
currentScrollPos = maxScroll;
}
$scrollSections.css({'transform': 'translateX(' + currentScrollPos + 'px)'});
});
});代码详解：
- currentScrollPos: 这是一个变量，用于存储 scroll-sections 容器当前的 translateX 值。初始值为 0，表示内容位于最左侧。
-
calculateMaxScroll():
- 这个函数用于动态计算最大可向左滚动的距离。
- 它首先遍历所有的 section 元素，累加它们的 outerWidth(true)（包括边距、内边距和边框），得到所有 section 的总宽度。
- 然后，用当前视口宽度减去这个总宽度，得到一个负值。这个负值就是 translateX 可以达到的最小（最左）值。例如，如果视口宽 1000px，内容总宽 2000px，那么 maxScroll 就是 1000 - 2000 = -1000px。当 translateX 为 -1000px 时，内容最右侧刚好对齐视口最右侧。
-
$scrollSections.on('wheel', function(event) { ... });:
- wheel 事件是现代浏览器中用于检测鼠标滚轮活动的标准事件。
- event.originalEvent.wheelDelta (Chrome/Safari) 或 -event.originalEvent.deltaY (Firefox) 用于获取滚轮滚动的方向和强度。
- wheelDelta > 0 或 deltaY < 0 表示向上滚动。
- wheelDelta < 0 或 deltaY > 0 表示向下滚动。
- currentScrollPos += (delta / 3)：根据滚轮方向和强度更新 currentScrollPos。除以 3 是为了调整滚动速度，使其更平滑，避免一次滚动过快。
-
边界检测：
- if (currentScrollPos > 0) { currentScrollPos = 0; }：如果 currentScrollPos 尝试超过 0（即向右滚出起始位置），则将其重置为 0，防止向左过度滚动。
- `if (currentScrollPos < maxScroll) { currentScroll
