自动上下滚动元素
Scroll element up and down automatically
>我有一个简单的引导表，我试图让它自动垂直滚动。这样做的原因是，表格将显示在屏幕上，并且表格中可能有 10 个项目或 100 个项目。所以我希望它自动垂直滚动，这样用户就不必手动滚动。到达终点后，它只会重置并从顶部重新开始......
这是我到目前为止的标记：
<div class="table-responsive" style="height: 700px; overflow: auto;">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>注意：我希望这可以通过HTML和CSS来实现。
有什么建议吗？
需要
JS（或jQuery）来获取实际元素height并scrollHeight并对这些值执行动画
var $el = $(".table-responsive");
function anim() {
var st = $el.scrollTop();
var sb = $el.prop("scrollHeight")-$el.innerHeight();
$el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
$el.stop();
}
anim();
$el.hover(stop, anim);.table-responsive{
height:180px; width:50%;
overflow-y: auto;
border:2px solid #444;
}.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr><th>#</th></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</tbody>
</table>
</div>我强烈建议使用javascript。 我只用CSS尝试过一次，然后很快就放弃了这个想法，但理论上是可能的。 以下演示并未在所有浏览器上进行测试，存在巨大的兼容性问题，并且是Safari上有史以来最笨拙的东西。 故事的寓意：使用javascript。
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.table-responsive {
overflow-x: hidden;
}
table.table {
animation: ani linear 1s alternate infinite;
}
.table-responsive:hover {
overflow: auto;
}
.table-responsive:hover table.table {
animation: none ;
}
@keyframes ani {
0% { margin-left: 0; transform: translate3d(0%, 0, 0);}
25% { margin-left: 0; transform: translate3d(0%, 0, 0);}
75% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
100% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
}<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>下面的代码不会像问题中要求的那样重置并从表格顶部重新开始，但这将帮助一些未来的读者尝试使用固定标题自动滚动和循环表格行。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
var self=this,kids=self.children()
kids.slice(20).hide()
setInterval(function(){
kids.filter(':hidden').eq(0).fadeIn()
kids.eq(0).fadeOut(function(){
$(this).appendTo(self)
kids=self.children()
})
},1000)
return this
}
$(function(){
$('tbody').infiniteScrollUp()
})
</script>
<title>infiniteScrollUp</title>
</head>
<body>
<table>
<colgroup><col /><col /><col /><col /><col /><col /></colgroup>
<thead>
<tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
</thead>
<tbody>
<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
</tbody>
</table>
</body>
</html>相关文章：
- 指示禁用元素滚动行为并改为滚动页面
- 在某个点停止固定元素滚动
- jQuery 航点在元素滚动到视图中时添加类
- 到达(窗口）上的中间元素.滚动
- 当元素滚动出屏幕时更改元素位置
- jQuery-将元素滚动到屏幕中间，而不是使用锚链接滚动到顶部
- 我想为一个元素添加一个事件监听器，当相应的元素滚动到视图中时，该监听器就会被激发
- 将元素滚动到页面底部的视图中
- fadeIn元素滚动
- 当光标到达底部时，有没有办法防止contentEditable元素滚动
- 固定元素滚动到Div
- 如何平滑地防止固定元素滚动经过指定元素
- 将所有HTML元素滚动到视图中
- 如果浏览器窗口高度为X，并且元素滚动到其中的X点，则合并条件
- 使用isroll4将最后一个元素滚动到第一个元素的开始位置
- 如何显示单独的锂元素滚动基于窗口的高度
- 根据所单击的元素滚动到页面上的相同位置
- 元素滚动的同时滚动另一个
- 修改jQuery.ScrollTo插件将元素滚动到页面中心(垂直/水平）或尽可能靠近中心
- 我如何检测一个元素滚动到视窗
