jquery 鼠标滚轮横向滚动

原创

mob64ca12ee66e3 2024-08-25 05:15:01 ©著作权

文章标签 jQuery HTML 屏幕宽度 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ee66e3的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 鼠标滚轮横向滚动实现

在现代网页开发中，用户体验至关重要。随着屏幕宽度的增加，横向内容已经变得越来越普遍。用户可以通过鼠标滚轮来向上或向下滚动页面，但在某些情况下，您可能希望能够使用鼠标滚轮进行横向滚动。本文将为您介绍如何使用 jQuery 实现这种功能。

背景知识

在传统的网页设计中，内容主要是竖向排列的，这与用户习惯紧密相关。然而，在一些需要大量信息展示的场景中，横向布局可能更符合需求，例如产品展示、图片画廊、数据图表等。因此，实现横向滚动能够为用户提供更流畅的操作体验。

引入 jQuery

首先，我们需要确保页面中引入了 jQuery。如果您还没有引入 jQuery，可以在 HTML 文件的 <head> 部分添加以下代码：

<script src="

HTML 结构

为了实现横向滚动效果，首先需要构建一个简单的 HTML 结构。我们将使用一 div 容器，里面包含多个子项，形成横向布局。以下是一个基本的示例：

<div class="horizontal-scroll-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

接下来，我们为这个容器添加一些 CSS 样式，以确保子项能够并排显示并且可以进行滚动：

.horizontal-scroll-container {
    display: flex; /* 使用弹性布局 */
    overflow-x: auto; /* 启用横向滚动 */
    white-space: nowrap; /* 不换行 */
    width: 100%; /* 容器的宽度 */
}

.item {
    min-width: 200px; /* 设置每个项目的最小宽度 */
    height: 100px; /* 设置项目高度 */
    margin: 10px; /* 设置项目间距 */
    background-color: #007bff; /* 项目背景色 */
    color: white; /* 字体颜色 */
    display: flex; /* 垂直居中内容 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

jQuery 鼠标滚轮事件

接下来，我们使用 jQuery 来捕捉鼠标滚轮事件。我们将设置一个事件监听器，鼠标滚动时感知方向并执行横向滚动的操作。

$(document).ready(function() {
    var $container = $('.horizontal-scroll-container');

    $container.on('mousewheel DOMMouseScroll', function(e) {
        e.preventDefault(); // 阻止默认的滚动行为
        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

        // 根据滚轮滚动的方向更新 scrollLeft
        if (delta > 0) {
            $container.scrollLeft($container.scrollLeft() - 30); // 向左滚动
        } else {
            $container.scrollLeft($container.scrollLeft() + 30); // 向右滚动
        }
    });
});

代码解释

事件监听：我们在 .horizontal-scroll-container 上添加了 mousewheel 和 DOMMouseScroll 事件的监听，以兼容不同浏览器。
阻止默认行为：通过 e.preventDefault()，我们可以阻止浏览器执行默认的上下滚动行为。
计算滚动方向：wheelDelta 是一个属性，用于确定滚动的方向，正值表示向上滚动，负值表示向下滚动。
滚动容器：根据滚动的方向，更新容器的 scrollLeft 属性，实现横向滚动的效果。