使用jQuery和CSS实现平滑的鼠标滚轮水平滚动-html教程-PHP中文网

使用jQuery和CSS实现平滑的鼠标滚轮水平滚动

聖光之護

发布： 2025-10-24 10:09:29

原创

764人浏览过

使用jquery和css实现平滑的鼠标滚轮水平滚动

本文详细介绍了如何利用jQuery和CSS创建平滑的网页水平滚动效果，并通过鼠标滚轮进行控制。我们将探讨关键的CSS布局技巧，如`display: inline-block`和`white-space: nowrap`，以及jQuery中`wheel`事件监听、`transform: translateX`动画和精确的滚动边界控制，以解决传统方法中滚动不流畅和越界的问题，最终实现类似单页应用的用户体验。

网页水平滚动实现：jQuery与CSS实践

在现代网页设计中，为了提供独特的视觉体验或更好地组织内容，水平滚动布局越来越受欢迎。结合鼠标滚轮事件，我们可以实现一种直观且引人入胜的导航方式。本教程将指导您如何使用jQuery和CSS构建一个平滑、受控的水平滚动页面。

1. HTML结构搭建

首先，我们需要一个包含多个内容区域（例如section元素）的容器。这些内容区域将作为水平滚动的单元。为了方便管理，我们将它们包裹在一个父级div中。同时，为了引入jQuery库，我们会在HTML文件的适当位置添加CDN链接。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平滑水平滚动示例</title>
    <!-- 引入jQuery库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="scroll-sections">
        <section id="section-1">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1>第一部分</h1>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-2">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1>第二部分</h1>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-3">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1>第三部分</h1>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1>第四部分</h1>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1>第五部分</h1>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

2. CSS样式定义

CSS是实现水平布局和滚动平滑度的关键。我们将通过以下规则来构建我们的界面：

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

查看详情

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

全局样式：移除html和body的默认外边距，并隐藏默认的垂直滚动条，确保我们的自定义滚动机制能够完全控制。
内容区域 (section)：
- height: 99vh;：让每个部分占据视口的高度，提供全屏体验。
- display: inline-block;：使各部分水平排列。
- width: 33.3%;：示例中每个部分占据视口宽度的三分之一，您可以根据需求调整。
- overflow: visible;：确保内容不会被裁剪。
滚动容器 (.scroll-sections)：
- white-space: nowrap;：防止inline-block元素换行，强制它们在同一行显示。
- height: 100%;：使其高度与父元素（body）一致。
- overflow: visible;：允许内容超出其边界，由JavaScript控制可见区域。
- transition-duration: 0.5s;：这是实现平滑滚动的核心。当transform属性改变时，它会在0.5秒内平滑过渡，而不是瞬间跳跃。

html, body {
    margin: 0px;
    overflow: hidden; /* 隐藏默认滚动条 */
}

section {
    height: 99vh; /* 每个部分占据视口高度 */
    display: inline-block; /* 使各部分水平排列 */
    width: 33.3%; /* 示例宽度，可根据需求调整 */
    border: 1px solid red; /* 仅为可视化方便 */
    overflow: visible;
}

.scroll-sections {
    white-space: nowrap; /* 防止内联块元素换行 */
    height: 100%;
    overflow: visible;
    transition-duration: 0.5s; /* 关键：平滑过渡效果 */
}

登录后复制

3. jQuery滚动逻辑

现在，我们来实现鼠标滚轮控制的滚动逻辑。我们将监听wheel事件，并根据滚轮方向调整容器的translateX属性。

$(document).ready(function(){
    var pos = 0; // 当前滚动位置的translateX值
    var scrollContainer = $(".scroll-sections");

    // 计算最大允许的负向滚动值（即最右端）
    // totalContentWidth 是所有section的总宽度
    var totalContentWidth = 0;
    scrollContainer.children().each(function() {
        totalContentWidth += $(this).outerWidth(true); // outerWidth(true) 包含外边距
    });
    var viewportWidth = $(window).width(); // 视口宽度
    var maxScroll = viewportWidth - totalContentWidth; // 最大负向translateX值

    // 监听鼠标滚轮事件
    scrollContainer.on('wheel', function(event) {
        // event.originalEvent.wheelDelta: 向上滚动为正值 (通常是120), 向下滚动为负值 (-120)
        // 这里除以3是为了让滚动更平滑，您可以根据需要调整速度
        pos = pos + (event.originalEvent.wheelDelta / 3);

        // 边界检查：防止滚动超出内容区域
        if (pos > 0) {
            pos = 0; // 限制在起始位置（最左端）
        }
        if (pos < maxScroll) {
            pos = maxScroll; // 限制在结束位置（最右端）
        }

        // 应用CSS transform属性进行水平位移
        // 使用translateX比直接修改left属性性能更好，因为它利用了GPU加速
        scrollContainer.css({'transform': 'translateX(' + pos + 'px)'});

        // 阻止默认的垂直滚动行为
        return false;
    });
});

登录后复制

4. 注意事项与优化

transform: translateX vs left: 教程中使用了transform: translateX进行位移，而不是直接修改left属性。这是因为transform属性通常由GPU加速，能够提供更流畅的动画效果，尤其是在复杂的页面或低性能设备上。
transition-duration: 在CSS中设置transition-duration是实现平滑滚动的关键。没有它，transform的变化将是瞬间完成的，导致生硬的跳跃。
边界控制: 精确计算maxScroll并实施pos的边界检查（if (pos > 0)和if (pos < maxScroll)）是防止内容无限滚动或卡顿的重要步骤。maxScroll的计算需要确保它准确反映了内容完全滚动到最右端时translateX应达到的值。
滚动速度: event.originalEvent.wheelDelta / 3中的除数可以调整滚动的灵敏度。数值越大，滚动速度越慢。
跨浏览器兼容性: wheel事件是现代浏览器推荐的滚轮事件。对于旧版浏览器，可能需要考虑mousewheel和DOMMouseScroll事件，但jQuery的on('wheel')通常能很好地处理。
响应式设计: 示例中的section宽度设置为33.3%，这意味着在任何视口宽度下，始终有3个部分可见。您可以根据需要调整此百分比或使用媒体查询来实现更复杂的响应式布局。
内容宽度计算: totalContentWidth的计算使用了outerWidth(true)以确保包含外边距。如果您的section元素有内边距或边框，outerWidth()（不带参数）或width()可能需要根据实际情况调整。