使用 jQuery 和 CSS 实现流畅的鼠标滚轮控制水平滚动效果-html教程-PHP中文网

使用 jQuery 和 CSS 实现流畅的鼠标滚轮控制水平滚动效果

DDD

发布： 2025-10-24 10:51:10

原创

721人浏览过

使用 jQuery 和 CSS 实现流畅的鼠标滚轮控制水平滚动效果

本教程详细阐述如何利用 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 属性。

立即学习“前端免费学习笔记（深入）”；

智标领航

专注招投标业务流程的AI助手，智能、高效、精准、易用！

117

查看详情

/* 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