js 控制table无线滚动

您好，您可以使用CSS样式控制表格滚动条的样式，同时使用JavaScript监听表格的滚动事件来控制表格的滚动。

具体的实现方式为：

1. 设置CSS样式控制表格的滚动条样式：

table {
overflow-y:scroll;
display:block;
}

::-webkit-scrollbar {
width: 5px;
}

::-webkit-scrollbar-thumb {
background-color: #666;
}

2. 使用JavaScript监听表格的滚动事件，当表格滚动到底部时，动态添加新的行数据：

var table = document.getElementsByTagName("table")[0];

table.addEventListener('scroll', function(e) {
var scrollTop = e.target.scrollTop;
var scrollHeight = e.target.scrollHeight;
var clientHeight = e.target.clientHeight;

if (scrollTop + clientHeight == scrollHeight) {
// 添加新的行数据
}
});

希望能对您有所帮助，如有问题请随时提出。

相关问题

js table自动滚动和排序

回答: 要实现JS表格的自动滚动和排序，可以使用以下步骤。首先，分析问题并确定需要实现的功能。根据引用\[1\]，可以选择匀速滚动或有间隔的平滑滚动。在这个例子中，我们选择匀速滚动。接下来，根据引用\[2\]中的代码，创建一个公共的滚动方法，该方法接受一个元素id名称作为参数。在该方法中，使用jQuery的animate()函数来实现表格的滚动效果。具体来说，通过设置表格的marginTop属性来实现滚动效果，并在滚动完成后将第一行的tr元素移到表格的末尾。最后，根据引用\[3\]中的代码，在body中添加一个表格，并为其设置一个id属性为"testTable"。通过调用setTableRoll("testTable")方法，即可实现表格的自动滚动效果。至于排序功能，根据提供的引用内容，没有提到与排序相关的代码或方法。因此，如果需要实现表格的排序功能，可能需要额外的代码或方法来实现。
#### 引用[.reference_title]
- *1* [vue实现table自动滚动](https://blog.csdn.net/weixin_43361722/article/details/131168905)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [table数据自动滚动](https://blog.csdn.net/C_hydar/article/details/130102703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

js table表格自动滚动

要实现表格自动滚动，你可以使用JavaScript和CSS来完成。下面是一个简单的示例代码：

HTML部分：

<div class="table-container">
  <table id="myTable">
    <!-- 表格内容 -->
  </table>
</div>

CSS部分：

.table-container {
  height: 200px; /* 设置表格容器的高度 */
  overflow: auto; /* 设置溢出内容自动滚动 */
}

JavaScript部分：

// 获取表格容器元素
var tableContainer = document.querySelector('.table-container');

// 滚动到底部
tableContainer.scrollTop = tableContainer.scrollHeight;

在上述代码中，我们首先使用CSS设置了一个固定高度的表格容器，并将其溢出内容设置为自动滚动。然后，在JavaScript中，我们使用`querySelector`方法获取到表格容器元素，并通过设置`scrollTop`属性为`scrollHeight`来实现将表格滚动到底部。

你可以根据自己的实际需求修改表格容器的高度和ID，以及在表格中添加需要的内容。