jquery 横向滚动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。横向滚动是指在一个容器内，内容可以沿着水平方向滚动显示。

类型

纯 CSS 实现：通过设置容器的 overflow-x 属性为 scroll 或 auto，并设置宽度，可以实现简单的横向滚动。
JavaScript/jQuery 实现：通过 JavaScript 或 jQuery 动态控制滚动条的位置和行为。

应用场景

图片轮播：在有限的空间内展示多张图片，用户可以通过横向滚动查看所有图片。
长列表：当列表项过多时，可以通过横向滚动来展示所有内容。
导航菜单：在有限的宽度内展示多个导航项，用户可以通过横向滚动选择。

示例代码

纯 CSS 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scroll</title>
    <style>
        .scroll-container {
            width: 300px;
            overflow-x: auto;
            white-space: nowrap;
        }
        .scroll-item {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
        <div class="scroll-item"></div>
    </div>
</body>
</html>

jQuery 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scroll with jQuery</title>
    <style>
        .scroll-container {
            width: 300px;
            overflow-x: hidden;
            position: relative;
        }
        .scroll-content {
            white-space: nowrap;
        }
        .scroll-item {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-right: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
            <div class="scroll-item"></div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.scroll-container').on('wheel', function(e) {
                e.preventDefault();
                var delta = e.originalEvent.deltaX;
                var left = $('.scroll-content').offset().left;
                var newLeft = left - delta;
                $('.scroll-content').css('left', newLeft + 'px');
            });
        });
    </script>
</body>
</html>