JS实现表格无缝滚动（无限滚动效果）

要实现无缝滚动的表格，可以通过监听滚动事件，并在合适的时候更新表格内容来实现。以下是一个简单的无缝滚动实现示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动表格</title>
<style>
    #scrollContainer {
        overflow-y: scroll;
        height: 200px;
        border: 1px solid #000;
    }
    #tableContainer {
        height: 1000px; /* 足够高以允许滚动 */
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
</style>
</head>
<body>
 
<div id="scrollContainer">
    <div id="tableContainer">
        <table>
            <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <!-- 表格内容将通过JS动态填充 -->
            </tbody>
        </table>
    </div>
</div>
 
<script>
// 模拟的数据源
const data = new Array(1000).fill(null).map((_, i) => ({ id: i, value: '行' + i }));
 
const tbody = document.getElementById('tbody');
const tableContainer = document.getElementById('tableContainer');
 
// 添加初始数据
function addRows(rows) {
    rows.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${row.id}</td><td>${row.value}</td><td>其他数据</td>`;
        tbody.appendChild(tr);
    });
}
 
// 当滚动条接近底部时添加新行
scrollContainer.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
    if (scrollTop + clientHeight >= scrollHeight - 5) { // 5是一个缓冲区，避免直接接触到底部就添加
        const startIndex = tbody.childElementCount;
        const endIndex = startIndex + 25; // 每次添加25行
        addRows(data.slice(startIndex, endIndex));
        tableContainer.style.height += 25 * 20; // 增加tableContainer的高度以允许滚动
    }
});
 
// 初始添加一些行
addRows(data.slice(0, 50));
</script>
 
</body>
</html>

这段代码中，我们监听了滚动容器的滚动事件，并在接近底部时动态地向表格添加新的行。这样用户滚动时可以看到新的数据被不断加载进来，给用户一种无缝滚动的效果。

JS实现表格无缝滚动（无限滚动效果）

评论已关闭

推荐阅读