本教程详细阐述如何利用 jquery 和 css 创建一个响应鼠标滚轮事件的水平滚动页面。我们将通过 css 的 `display: inline-block` 和 `white-space: nowrap` 构建横向布局，并结合 jquery 监听 `wheel` 事件，通过 css `transform: translatex` 实现平滑的滚动动画。文章还将重点介绍如何计算并实现滚动边界检测，确保用户无法过度滚动，从而提供流畅且受控的用户体验。
在现代网页设计中，水平滚动效果为用户提供了独特的浏览体验，尤其适用于展示一系列内容或产品。通过巧妙结合 CSS 布局与 jQuery 的事件处理能力，我们可以实现一个由鼠标滚轮驱动的平滑水平滚动页面，并加入必要的边界检测以优化用户体验。
1. HTML 结构：构建可滚动的区块
首先，我们需要一个清晰的 HTML 结构来承载水平滚动的各个内容区域。通常，我们会使用一个容器元素包裹多个“section”或“slide”元素。
水平滚动教程 第一部分
这是第一部分的内容。
第三部分
这是第三部分的内容。
第五部分
这是第五部分的内容。
请注意，我们引入了 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）向左移动内容 var delta = event.originalEvent.wheelDelta || -event.originalEvent.deltaY; // 根据滚轮方向调整滚动位置 // delta / 3 用于调整滚动速度，可根据需要修改 currentScrollPos += (delta / 3); // 边界检测：防止过度滚动 if (currentScrollPos > 0) { currentScrollPos = 0; // 滚动到最左侧边界 } 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 wheelDelta 0 表示向下滚动。currentScrollPos += (delta / 3)：根据滚轮方向和强度更新 currentScrollPos。除以 3 是为了调整滚动速度，使其更平滑，避免一次滚动过快。边界检测：if (currentScrollPos > 0) { currentScrollPos = 0; }：如果 currentScrollPos 尝试超过 0（即向右滚出起始位置），则将其重置为 0，防止向左过度滚动。`if (currentScrollPos
以上就是使用 jQuery 和 CSS 实现流畅的鼠标滚轮控制水平滚动效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588168.html
微信扫一扫 
支付宝扫一扫 
