div写表格,原生滚动条,数据能够自动滚动
如何让表格的滚动条能够自动滚动呢?
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写表格,原生滚动条,数据能够自动滚动的更多相关文章
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...
- 数据驱动表格| 根据json数据,自动生成合并式table
1.数据驱动表格 2.数据驱动表格(2)
- swiper有时候不能自动滚动的问题
<script type="text/javascript"> $(function(){ var swiper = new Swiper('.swiper-conta ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- 实现锁死的有滚动条的div的表格(datagird)
JS框架使用Jquery 最终效果: 代码结构: 代码: <HEAD><TITLE>new document</TITLE> <META name=Gener ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- JaveScript-解决表格使用滚动条时冻结表头栏问题
解决方法: //设置表格表头里的th==表格内容里的td function ThEqualTd(thId, tdId) { var tdNum = document.getElementById(td ...
- render 函数渲染表格的当前数据列使用
columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
随机推荐
- spring-mvc 3.* 多视图解析配置实例 ContentNegotiatingViewResolver
一.起因 从spring 3.1.0升级到spring 3.2.0时,配置文件servlet.xml中出错. 错误信息: java.lang.String cannot be cast to ...
- 爬虫二之Requests
requests 实例引入 import requests response = requests.get('https://www.baidu.com') response.status_code ...
- 爬取LeetCode题目——如何发送GraphQL Query获取数据
前言 GraphQL 是一种用于 API 的查询语言,是由 Facebook 开源的一种用于提供数据查询服务的抽象框架.在服务端 API 开发中,很多时候定义一个接口返回的数据相对固定,因此要获得 ...
- mysql的my.sock不存在问题
因为是初步学习Linux,所以为了对其更加了解,没有使用yum对mysql进行安装,而是使用xftp6的方式上传然后解压安装 1.在安装过程中,好像如果不安装在usr/local目录下会存在不能启动的 ...
- [转帖]kafka入门:简介、使用场景、设计原理、主要配置及集群搭建
kafka入门:简介.使用场景.设计原理.主要配置及集群搭建 http://www.aboutyun.com/thread-9341-1-1.html 还没看完 感觉挺好的. 问题导读: 1.zook ...
- Java GC日志
JVM 命令:-Xms5m -Xmx20m -XX:+PrintGCDetails -XX:+PrintCommandLineFlags -XX:+UseSerialGC [GC (Allocatio ...
- express 实现我猜你喜欢功能
工具:利用cookie-parser中间件; 原理: 每次访问某一具体的文章,就表明可能客户端对这类文章感兴趣, 将这类文章的标签添加到cookie里,字段是like; 然后退回到含有 我猜你喜欢模块 ...
- P1049装箱问题
这是一道DP(背包)水题. 题目问剩余空间最小,那么意思为装得最多.拿到题后便习惯了用贪心去思考,发现局部并不是全局最优,所以考虑dp.但是发现01背包的价值呢?(这个错误的想法就显示了我对dp理解得 ...
- Tarjan水题系列(2):HNOI2012 矿场搭建
题目: 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一个挖煤点坍塌之后 ...
- python 发送kafka
python 发送kafka大体有三种方式 1 发送并忘记(不关注是否正常到达,不对返回结果做处理) 1 import pickle 2 import time 3 from kafka import ...