js实现滚动的table——解决滚动停止问题

最新推荐文章于 2024-06-24 15:18:02 发布

一条大河全靠浪

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签：滚动table 停止问题 js

本文链接：https://blog.csdn.net/HYeeee/article/details/80811696

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

滚动table的实现主要是通过两个相同的table，不断的重复交替。实现的js不难，但总是出现滚动停止的问题，每次碰到还不一样，特此记录。

css文件 — csee.css

为了下次直接用，把css也贴上。

.title-panel{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        height: 40px;
    }
    .title-panel td{
        width: 15%;
        font-size: large;
        font-weight: bold;
        text-align:center;
    }
    .my-panel{
        margin-top: 5px;
        margin-left: 20px;
        margin-right: 20px;
        overflow: hidden;
        height: 240px;
    }


    /*单元格水平居中*/
    .my-panel td {
        height: 38px;
        width: 15%;
        font-size: large;
        text-align:center;
    }

ScrolleTable.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>滚动table</title>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件，务必在bootstrap.min.js 之前引入，否则导致小屏幕点击不出现下拉框 ，版本过低也会-->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="csee.css">

</head>

<body>

<div class="container-fluid" >

    <div class="row">

        <div  class="panel panel-info title-panel ">
            <table  class="table table-striped " >
                <thead>
                <td>编号</td>
                <td>姓名</td>
                </thead>
            </table>
        </div>
        <div class="panel panel-info my-panel " id="demo" >


            <div class="panel-body" id="dis_table1">
                <table  class="table table-striped " >
                    //这里自己多写几个值
                    <tr>
                          <td>1</td>
                          <td>呵呵</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>呵呵</td>
                    </tr>
                    .......

                </table>

            </div>

            <div class="panel-body" id="dis_table2"></div>
        </div>

    </div>

</div>
</body>
</html>

js文件–disgroup.js

$(function(){

    var speed = 50;
    //保证二者数据一致
    dis_table2.innerHTML = dis_table.innerHTML;
    function Marquee() {
        if (dis_table2.offsetTop - demo.scrollTop <= 0) {
        //若想到底停止，则注释掉下面这句，并将上面的0修改为合适值，这个值得自己调了
            demo.scrollTop -= dis_table1.offsetHeight;
        } else {
            demo.scrollTop++;
        }
    }
    var MyMar = setInterval(Marquee, speed);

    //下面是鼠标动作，可以不要,鼠标在表格上即停止
    demo.onmouseover = function() {
        clearInterval(MyMar);
    }

    demo.onmouseout = function() {
        MyMar = setInterval(Marquee, speed);
    }

});

问题记录

出现滚动一次，然后就不动了，原因：

保证两个滚动的表格都有一样的值

如果dis_table1中的表格数据结构不是像这样写死在HTML中，而是通过ajax获取数据后加载进来的html字符串，那么在ajax中为dis_table1 进行append操作的同时，也要为第dis_table2进行同样的操作，否则dis_table2没有值，循环滚动就没法进行。
if (dis_table2.offsetTop - demo.scrollTop <= 0)

这里面的0并不是固定的，如果demo这个块与top距离为0，则写0，否则要依照具体距离顶端高度给值

console.log(dis_table2.offsetTop - demo.scrollTop);

打印他们的差值，如果为15，则修改

if (dis_table2.offsetTop - demo.scrollTop <= 15) 

其他值无论大于还是小于15都无效.

一条大河全靠浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现滚动的table——解决滚动停止问题

滚动table的实现主要是通过两个相同的table，不断的重复交替。实现的js不难，但总是出现滚动停止的问题，每次碰到还不一样，特此记录。css文件 — csee.css为了下次直接用，把css也贴上。.title-panel{ margin-top: 20px; margin-left: 20px; margin-right: 20px...
复制链接

扫一扫

专栏目录