用js做一个可以通过鼠标滚轮往下预览的表格
时间: 2024-05-15 15:19:27 浏览: 11
以下是一个可以通过鼠标滚轮往下预览的表格的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Scrollable Table</title>
<style>
#table-container {
height: 400px;
overflow-y: scroll;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
text-align: left;
}
</style>
</head>
<body>
<div id="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<!-- add more rows here -->
</tbody>
</table>
</div>
<script>
var container = document.getElementById('table-container');
container.addEventListener('wheel', function(e){
if (e.deltaY > 0) {
container.scrollTop += 50;
} else {
container.scrollTop -= 50;
}
e.preventDefault();
});
</script>
</body>
</html>
```
这个示例代码中,我们使用CSS的`overflow-y:scroll`属性将表格容器设置为有滚动条。然后,在JS代码中,我们通过监听滚轮事件(`wheel`事件),根据滚轮的滚动方向来向上或向下滚动表格容器的滚动条位置。最后,我们使用`preventDefault()`方法来阻止默认的滚轮事件,以避免页面滚动。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)