zoukankan      html  css  js  c++  java
  • 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{
    320px;
    height: 155px;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    }
    .tabinner5::-webkit-scrollbar {
    /*滚动条整体样式*/
    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{
    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{
    160px;
    color: #b8d8ff;
    padding-left: 20px;
    }
    .tab5 .mes2{
    96px;
    color:#65fdff;
    }
    .tab5 .mes3{
    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=$(".tabinner5")[0].scrollHeight-$(".tabinner5")[0].offsetHeight;
    bar1+=26;
    if(bar1>n1){
    bar1=0;
    }
    $(".tabinner5").animate({scrollTop:bar1},1000);

    },1000)
    }

    }

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

    $(function(){

    scrolltab1();

    })

    效果图:

  • 相关阅读:
    Delphi的idhttp报508 Loop Detected错误的原因
    Delphi的idhttp报IOHandler value is not valid错误的原因
    华为S5700S-52P-LI-AC千兆网管交换机web登录界面配置
    解决win2003/2008下注册机或破解补丁程序无法运行问题
    SQL拆分(转)
    1602四线驱动
    ADC取样
    Delphi AES加密(转)
    使用Qt开发中国象棋(一):概述
    清除当前文件夹下.svn文件的方法
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11512925.html
Copyright © 2011-2022 走看看