如何让表格的滚动条能够自动滚动呢?

html:

<div class="tabinner5">
<div class="tab5 tab5a">
<div class="mes mes1">aaaaaa</div>
<div class="mes mes2">0</div>
<div class="mes mes3">0</div>
</div>
<div class="tab5">
<div class="mes mes1">bbbbbb</div>
<div class="mes mes2">0</div>
<div class="mes mes3">0</div>
</div>
<div class="tab5">
<div class="mes mes1">ccccccc</div>
<div class="mes mes2">0</div>
<div class="mes mes3">0</div>
</div>
<div class="tab5">
<div class="mes mes1">优先选择试点</div>
<div class="mes mes2">0</div>
<div class="mes mes3">0</div>
</div>
<div class="tab5">
<div class="mes mes1">dddddd</div>
<div class="mes mes2">0</div>
<div class="mes mes3">0</div>
</div>
<div class="tab5">
<div class="mes mes1">eeeeee</div>
<div class="mes mes2">0</div>
<div class="mes mes3">0</div>
</div>
<div class="tab5">
<div class="mes mes1">ffffffffff</div>
<div class="mes mes2">0</div>
<div class="mes mes3">0</div>
</div>
</div>

css:

.tabinner5{
width: 320px;
height: 155px;
margin: 0 auto;
overflow-y: auto;
overflow-x: hidden;
}
.tabinner5::-webkit-scrollbar {
/*滚动条整体样式*/
width: 6px; /*宽分别对应竖滚动条的尺寸*/
height:2px; /*高分别对应横滚动条的尺寸*/
}
.tabinner5::-webkit-scrollbar-track {
/*滚动条里面轨道*/
background-color: rgba(77, 134, 230, 0.4);
}

.tabinner5::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background-color: rgba(77, 134, 230, 0.8);
}

.tabinner5 .tab5{
width: 336px;
height: 26px;
margin: 0 auto;
color:#fff;

}

.tab5 .mes{
display: inline-block;
float: left;
height:26px;
box-sizing: border-box;
text-align: left;
font-size: 12px;
padding-top: 4px;
}
.tab5 .mes1{
width: 160px;
color: #b8d8ff;
padding-left: 20px;
}
.tab5 .mes2{
width: 96px;
color:#65fdff;
}
.tab5 .mes3{
width: 72px;
color:#65fdff;
}
.tab5:nth-of-type(odd) {
background-color: #202a3d;
}
.tab5:nth-of-type(even) {
background-color:#25314a;
}

.tab5:hover .mes{
background-color: #e3be49;
color: #000;
cursor: pointer;
}

js:

var bar1=0;
var m1;
function scrolltab1(){
clearInterval(m1);
m1=setInterval(function(){
let n1=$(".tabinner")[0].scrollHeight-$(".tabinner")[0].offsetHeight;
bar1+=26;
if(bar1>n1){
bar1=0;
}
$(".tabinner").animate({scrollTop:bar1},1000);

},1000)
}

}

//这个不要忘了在预加载时调用函数哦哦哦哦哦

$(function(){

scrolltab1();

})

效果图:

div写表格,原生滚动条,数据能够自动滚动的更多相关文章

  1. 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

  2. 数据驱动表格| 根据json数据,自动生成合并式table

    1.数据驱动表格 2.数据驱动表格(2)

  3. swiper有时候不能自动滚动的问题

    <script type="text/javascript"> $(function(){ var swiper = new Swiper('.swiper-conta ...

  4. 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  5. 实现锁死的有滚动条的div的表格(datagird)

    JS框架使用Jquery 最终效果: 代码结构: 代码: <HEAD><TITLE>new document</TITLE> <META name=Gener ...

  6. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  7. JaveScript-解决表格使用滚动条时冻结表头栏问题

    解决方法: //设置表格表头里的th==表格内容里的td function ThEqualTd(thId, tdId) { var tdNum = document.getElementById(td ...

  8. render 函数渲染表格的当前数据列使用

    columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...

  9. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

随机推荐

  1. 2018.03.29 python-matplotlib 图表生成

    '''Matplotlib -> 一个python版的matlab绘图接口,以2D为主,支持python,numpy,pandas基本数据结构,高效图标库''' import numpy as ...

  2. 【HBase】四、HBase的安装及命令行接口

      通过前面的介绍,对HBase数据模型,运行机制等理论基本了解,接下来从实践的角度介绍HBase的安装以及其各种接口的使用方法. 1.HBase的安装   HBase安装很简单,和所有的Hadoop ...

  3. 应用安全 - 工具 | 数据库 - redis - 漏洞 - 汇总

    未授权访问 Date 类型 未授权访问导致getshell 影响范围 复现 (1)shell反弹 (2)结合SSH服务 (3)结合web服务 分析

  4. vue组件事件(极客时间Vue视频笔记)

    vue组件核心:事件 <body> <div class="app"> <todo-list></todo-list> {{mess ...

  5. vue vuex应用

    vue结构图: vuex为vue的一个插件,用来管理共享数据的,局部数据声明在自己组件内部. 没有使用vuex时,所有共享数据和操作数据的方法都声明在父组件内,数据的通信用props及pubsub等. ...

  6. 背包问题: HDU1114Piggy-Bank

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  7. chromium for android GPU进程结构分析

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/jaylinzhou/article/details/27517471 GPU进程的client(Br ...

  8. css重置的各种版本总结

    个人手机端常用到的: @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ...

  9. 值不能为null.参数名: viewInfo,如何解决

    有蓝队网络服务器租用客户反映在一台服务器上使用数据库管理工具时弹出了如下错误 :值不能为null.参数名: viewInfo (Microsoft.SqlServer.Management.SqlSt ...

  10. 以当前时间作为GUID的方法

    在C#中,系统提供了GUID类,用户可以通过该类来获得128位的唯一标识,但是该标识不具有可读性,很难把该GUID显示在界面上,以当前时间精确到毫秒来作为GUID是一个比较不错的做法,但是DateTi ...