我有一个表,其中有多行,是可滚动的。我一直试图添加一个功能,自动垂直滚动的表组件加载后,所以用户不必手动滚动。下面是我所做的工作到目前为止。
componentDidMount() {
var tableContainer = document.querySelector("tbody");
function autoScroller(){
var sTop = tableContainer.scrollTo(top);
var sDown = tableContainer.scrollHeight - tableContainer.clientHeight;
tableContainer.animate({scrollTop:sTop < sDown/2 ? sDown : 0}, 4000, autoScroller);
}
autoScroller();
}
render(){
return(
<div className="tableContainer">
<table className="table table-striped table-dark">
<thead>
<tr>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr><td>row 1</td></tr>
<tr><td>row 2</td></tr>
<tr><td>row 3</td></tr>
<tr><td>row 4</td></tr>
<tr><td>row 5</td></tr>
<tr><td>row 6</td></tr>
<tr><td>row 7</td></tr>
<tr><td>row 8</td></tr>
</tbody>
</table>
</div>
)
}
字符串
和CSS
table thead tr th{
position: sticky;
top: 0;
background-color: gray;
}
.tableContainer {
height:20vh ;
overflow-y: scroll;
margin-bottom: 15px;
}
型
1条答案
按热度按时间cig3rfwq1#
这样的东西可能会起作用:
个字符
我有相同的用例,并首先实现了上面的方法。我后来需要一个更连续/循环滚动,我最终实现了w/ CSS动画(实现可以看到here)。
我刚刚发布了一个react组件到
npm
,如果它可能符合您的需求:react-auto-scroll-table。