Bootstrap 自动上下滚动元素

jhiyze9q 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(3)|浏览(257)

我有一个简单的引导表，我试图有垂直滚动自动。这样做的原因是，该表将显示在屏幕上，该表可以有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来实现。
有什么建议吗

twitter-bootstrap

来源：https://stackoverflow.com/questions/36873753/scroll-element-up-and-down-automatically

3条答案

按热度按时间

hiz5n14c1#

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>

赞(0）回复(0）举报 2023-08-01

xqnpmsa82#

我强烈推荐使用JavaScript。我只使用CSS尝试过一次，然后迅速放弃了这个想法，但理论上是可能的。下面的演示没有在所有浏览器上测试，有很大的兼容性问题，是Safari上有史以来最jankiest的东西。这个故事的寓意：使用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);}
}

个字符

赞(0）回复(0）举报 2023-08-01

svdrlsy43#

下面的代码不会像问题中所问的那样重置并从表的顶部开始，但这将有助于一些未来的读者尝试使用固定标题自动滚动和循环表行。

<!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>

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 自动上下滚动元素

3条答案

相关问题

热门标签

最新问答