如何实现jQuery动态表格垂直滚动器末尾循环滚动？

首先明确你当前代码的核心问题：

• 滚动到底的判断逻辑错误：你用scrollTop >= w来判断，但实际容器滚动到底的条件是容器滚动距离 + 容器可视高度 >= 表格总高度，原条件会导致无法正确触发循环重置。
• 缺少数据量较少时的判断逻辑：没有判断表格总高度是否小于等于容器高度，导致数据少的时候也会启动无效滚动。

下面是修改后的完整代码：

jQuery.fn.extend({
    pic_scroll: function () {
        $(this).each(function () {
            var container = $(this);
            var tableEl = container.find("table");
            // 表格总滚动高度
            var tableTotalHeight = tableEl[0].scrollHeight;
            // 容器可视高度
            var containerVisibleHeight = container.innerHeight();
            var scrollStep = 1;
            var scrollingTimer;

            // 数据量较少时直接返回，不启动滚动
            if (tableTotalHeight <= containerVisibleHeight) {
                return;
            }

            // 鼠标悬浮停止滚动，离开恢复
            container.hover(function () {
                scrollStep = 0;
            }, function () {
                scrollStep = 1;
            });

            function autoScroll() {
                var currentScrollTop = container.scrollTop();
                // 正确判断是否滚动到底
                if (currentScrollTop + containerVisibleHeight >= tableTotalHeight) {
                    // 滚动到顶部实现循环
                    container.scrollTop(0);
                } else {
                    container.scrollTop(currentScrollTop + scrollStep);
                }
            }

            // 启动滚动定时器
            scrollingTimer = setInterval(autoScroll, 30);

            // 清理定时器避免内存泄漏
            container.on('remove', function () {
                clearInterval(scrollingTimer);
            });
        });
    }
});

$(function () {
    $(".contain").pic_scroll();
});

关键修改点说明：

• 修正滚动判断逻辑：用currentScrollTop + containerVisibleHeight >= tableTotalHeight准确判断容器是否滚动到底，确保触发循环滚动。
• 增加数据量判断：提前检查表格总高度是否小于等于容器可视高度，满足条件则不启动滚动。
• 变量名优化：将原混淆的命名改为container、tableEl，提升代码可读性。
• 添加定时器清理：容器被移除时清理定时器，避免内存泄漏。

内容的提问来源于stack exchange，提问作者NicolaIta