jquery 滚动div

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。滚动（Scrolling）是指在一个容器内（如 div）滚动内容，通常用于实现无限滚动、滚动加载等功能。

类型

手动滚动：通过 JavaScript 或 jQuery 手动控制元素的滚动位置。
自动滚动：通过定时器或事件触发自动滚动效果。
滚动事件：监听滚动事件，执行相应的操作。

应用场景

无限滚动：当用户滚动到页面底部时，自动加载更多内容。
滚动加载：在滚动过程中动态加载数据，提高用户体验。
滚动动画：实现平滑的滚动动画效果。

示例代码

手动滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Scroll Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #scrollDiv {
            width: 300px;
            height: 200px;
            overflow: auto;
            border: 1px solid #ccc;
        }
        .scrollContent {
            width: 100%;
            height: 1000px;
            background: linear-gradient(to bottom, #f0f0f0, #ccc);
        }
    </style>
</head>
<body>
    <div id="scrollDiv">
        <div class="scrollContent"></div>
    </div>
    <button id="scrollBtn">Scroll to Bottom</button>

    <script>
        $(document).ready(function() {
            $('#scrollBtn').click(function() {
                $('#scrollDiv').scrollTop($('#scrollDiv')[0].scrollHeight);
            });
        });
    </script>
</body>
</html>

自动滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Auto Scroll Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #scrollDiv {
            width: 300px;
            height: 200px;
            overflow: auto;
            border: 1px solid #ccc;
        }
        .scrollContent {
            width: 100%;
            height: 1000px;
            background: linear-gradient(to bottom, #f0f0f0, #ccc);
        }
    </style>
</head>
<body>
    <div id="scrollDiv">
        <div class="scrollContent"></div>
    </div>

    <script>
        $(document).ready(function() {
            setInterval(function() {
                var $scrollDiv = $('#scrollDiv');
                $scrollDiv.scrollTop($scrollDiv.scrollTop() + 1);
            }, 50);
        });
    </script>
</body>
</html>

滚动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Scroll Event Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #scrollDiv {
            width: 300px;
            height: 200px;
            overflow: auto;
            border: 1px solid #ccc;
        }
        .scrollContent {
            width: 100%;
            height: 1000px;
            background: linear-gradient(to bottom, #f0f0f0, #ccc);
        }
    </style>
</head>
<body>
    <div id="scrollDiv">
        <div class="scrollContent"></div>
    </div>

    <script>
        $(document).ready(function() {
            $('#scrollDiv').scroll(function() {
                console.log('Scrolling...');
            });
        });
    </script>
</body>
</html>