jquery滚动列表

基础概念

jQuery滚动列表是一种常见的网页交互效果，它允许用户通过滚动来查看列表中的内容。这种效果通常用于长列表或无限滚动页面，以提高用户体验。

类型

固定高度滚动：列表容器有固定的高度，内容超出部分通过滚动条查看。
无限滚动：当用户滚动到页面底部时，自动加载更多内容。

应用场景

新闻网站：展示大量新闻标题，用户可以通过滚动查看。
电商网站：商品列表较长，用户可以通过滚动浏览。
社交媒体：动态消息列表，用户可以通过滚动查看更多内容。

示例代码

固定高度滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定高度滚动列表</title>
    <style>
        #scrollList {
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #ccc;
        }
        .list-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="scrollList">
        <div class="list-item">Item 1</div>
        <div class="list-item">Item 2</div>
        <div class="list-item">Item 3</div>
        <!-- 更多列表项 -->
    </div>
</body>
</html>

无限滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无限滚动列表</title>
    <style>
        #scrollList {
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #ccc;
        }
        .list-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="scrollList">
        <div class="list-item">Item 1</div>
        <div class="list-item">Item 2</div>
        <div class="list-item">Item 3</div>
        <!-- 更多列表项 -->
    </div>

    <script>
        $(document).ready(function() {
            var isLoading = false;
            var page = 1;

            function loadMoreItems() {
                if (isLoading) return;
                isLoading = true;

                // 模拟加载更多数据
                setTimeout(function() {
                    for (var i = 0; i < 10; i++) {
                        $('#scrollList').append('<div class="list-item">Item ' + (page * 10 + i) + '</div>');
                    }
                    page++;
                    isLoading = false;
                }, 1000);
            }

            $('#scrollList').scroll(function() {
                if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
                    loadMoreItems();
                }
            });

            loadMoreItems(); // 初始加载
        });
    </script>
</body>
</html>