js实现表格滚动

最新推荐文章于 2024-05-11 14:22:31 发布
最新推荐文章于 2024-05-11 14:22:31 发布
阅读量2.9k 收藏 5
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44436093/article/details/87823339
版权 
     <!DOCTYPE html>
     <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
                #box{width:500px;height:300px;overflow: hidden;}
         th,td{width:100px;height:50px;line-height: 35px;border: 1px solid gray;text-align: center;}       
    </style>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
    </table>
    <div id="box">
    <table id="con1">
        <tr>
            <td>1001</td>
            <td>李四</td>
            <td>21</td>
            <td>河南</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>张飞</td>
            <td>22</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>张弛</td>
            <td>21</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>1004</td>
            <td>张恒</td>
            <td>20</td>
            <td>广州</td>
        </tr>
        <tr>
            <td>1005</td>
            <td>李航</td>
            <td>21</td>
            <td>重庆</td>
        </tr>
        <tr>
            <td>1006</td>
            <td>额的</td>
            <td>21</td>
            <td>成都</td>
        </tr>
        <tr>
            <td>1007</td>
            <td>AAAA</td>
            <td>AAAA</td>
            <td>深圳</td>
        </tr> 
    </table>
    <table id="con2"></table>
    </div>
    <script type="text/javascript">
    var box=document.getElementById("box");
    var con1=document.getElementById("con1");
    var con2=document.getElementById("con2");
    var speed=30;
    con2.innerHTML=con1.innerHTML;
    function  ScrollUp(){
        if( box.scrollTop>=con1.scrollHeight){
            box.scrollTop=0;
        }else{
            box.scrollTop++;
        }
        console.log(con1.scrollHeight)
    }
   var i=setInterval("ScrollUp()",speed);
   box.onmouseenter=function(){
          Stop()
   }
    box.onmouseleave=function(){
          Up()
   }
    function Stop(){
    clearInterval(i);
    }
    function Up(){
    i=setInterval("ScrollUp()",speed);
   }
  </script> 
   </body>
  </html>
未来可见
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js+css实现表格无缝滚动
weixin_44389116的博客
07-04 549
【代码】js+css实现表格无缝滚动。
原生Js无缝滚动效果的简单实现
TimeToBeWinner
08-05 4256
前言： 1.仍然是比较简单的内容，从简单开始慢慢加深自己的js水平。 2.无缝滚动，前提条件是子box的高度要大于父box的高度，这样才有必要去滚动，否则直接展示就可以了。 3.增添了鼠标移入停止和移出继续滚动的效果。 4.在小结部分会总结一些过程中遇到的疑问，还望各位不啬赐教，拜谢。 代码如下： <!-- Time:2016.8.5 Author:Joel 1.html标
实现表格自动无限滚动的几种方式
热门推荐
qq_43919694的博客
09-17 1万+
实现表格自动无限滚动的几种方式 一、js进行控制 原理：通过js获取需要滚动的元素，通过定时改变scrollTop（t.scrollTop++）或者transform（t.style.transform='translateY(1px)'） 来实现滚动，在滚动区域外进行数据的调整，并矫正因数据变化而进行的变动。 例： // 滚动 tableMove1() { var x = this.tableData2[0]; let t = document.getElemen
2024年Web前端最全最详细的JS动态创建表格以及实现分页!(1)，2024年最新程序员面试题及答案
最新发布
2401_84619432的博客
05-11 743
第条,总共条数据
利用JS+CSS实现滚动表格数据展示
06-06
利用CSS动画制作 Html 表格数据滚动显示, 实际自己开发也不难实现。实现的方法很多，下面是本人的一种实现方案，分享给大家。
html 自动滚动,使用JS实现页面自动滚动
weixin_31508009的博客
05-30 230
HTML导入代码模板：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aspernatur, modi. Sapiente cupiditate nobis labore saepe beatae, earum. Veritatis, culpa.Lorem ipsum dolor sit amet, consect...
js 手写轮播列表-鼠标移入暂停滚动且可滚动列表，鼠标移出继滚动的位置继续轮播
yh8899abc的博客
10-17 1437
最近某个项目中要求的该奇葩的需求，要求列表轮播且鼠标移入暂停轮播且可以手动滚动列表，鼠标移出继续轮播 网上很多插件都满足了基本的轮播需求：轮播，鼠标移入暂停轮播，鼠标移出继续轮播，唯独这个需求没有满足，就是鼠标移入时，还可以手动滚动列表，于是我决定手写一个， 轮播实现的方式有很多种，可以用 transform、top来写，但为了这个特殊的需求，只有用scrollTop来实现了 html部分 // 外层容器 <div class="swiper-wrapper" ref="outterRef">
js实现表格自动滚动，鼠标放上去后停止滚动且可手动滚动
m0_50441807的博客
05-25 5073
scrollTop可以控制滚动的距离，可以设置一个永久定时器setInterval，每次执行定时器让scrollTop++，即可达到滚动的效果； 下面先理解js的几个属性：scrollHeight，offsetHeight，scrollTop，clientHeight
js给表格列头内容滚动
m0_70542915的博客
06-01 184
因列头是通过接口获取的，需要用js动态的判断字体长度是否超出外层盒子长度，另js使用keyframe较麻烦，所以选择transition而没有使用animation。首先调整样式，overflow: hidden隐藏的同时将多余的用省略号，需要加text-overflow: clip将省略号还原。最近写大屏项目，轮播表的列头有部分字段较长，要求循环滚动，没有被隐藏的不做滚动处理。
js控制轮播表格
m0_69564658的博客
02-28 638
js控制表格轮播
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
html+css+javascript实现列表循环滚动示例代码
12-13
说明：设置时间定时，在规定的时间内替换前一个节点的内容 1、关键代码：javascript： 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById(“dome1”); var dome2=document.getElementById(“dome2”); var speed=50;//设置向上轮动的速度 dome2[removed]=dome1[removed];//复制节点 关键语句 func
jquery.tablescroll.js
02-17
自动滚动!jquery.tablescroll.js
单独 表格滚动
很多时候犯错都是在不知情的情况下发生的
09-16 380
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;table表格无缝向上滚动-jq22.com&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.mi
JS实现决策报表中滚屏/跑马灯效果
theminer的博客
01-04 2044
1. 概述 1.1 版本 报表服务器版本 功能变更 11.0 -- 1.2预期效果 普通报表可以参考JS实现自动滚屏/跑马灯效果实现跑马灯效果，决策报表中报表块同样希望实现跑马灯效果，如下图所示： 1.3 实现思路 通过给报表块添加「初始化后」 JS 事件实现隐藏滚动条的跑马灯的效果。 跑马灯的详细接口介绍可参见：跑马灯接口 2. 示例 2.1 数据准备 新建决策报表，新建数据集ds1，SQL 语句为：SELECT * FROM 销量，如下...
js实现table或ul的自动滚动
MF180214的博客
01-03 1622
【代码】js实现table或ul的自动滚动。
用js实现table内容从下到上连续滚动
Programmer.Wenlong 小龙在线
04-03 959
网上有很多用ul实现新闻列表滚动的例子，但是很少有直接用table实现列表内容滚动的例子，而Marquee标签滚动的效果不是很好，于是就自己写了一个，提供给攻城师朋友们参考 实现思路：由于table包含标题和内容，实际上理想的效果是标题不动，内容滚动，于是把标题和内容拆分出来放在两个table中 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 T...
js实现table自动滚动
weixin_30445169的博客
07-15 3576
<div style="height:400px" :class="{anim:animate==true}" @mouseenter="mouseenter" @mouseleave="mouseleave"> <el-table :data="tableData" border style="width: 100%;margin-top: 15px;height:38...
js实现表格自动滚动
05-31
要实现表格的自动滚动，可以通过JavaScript来控制表格的scrollTop属性，从而实现表格的自动滚动。以下是一个简单的示例代码： HTML代码： ```html <table id="myTable"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <!-- 重复添加多个数据行 --> </tbody> </table> ``` JavaScript代码： ```javascript var myTable = document.getElementById('myTable'); var scrollPos = 0; // 初始滚动位置 var scrollInterval = setInterval(scrollTable, 20); // 每20毫秒滚动一次 function scrollTable() { scrollPos += 1; // 每次滚动1像素 if (scrollPos >= myTable.scrollHeight - myTable.clientHeight) { // 滚动到底部时，重置滚动位置 scrollPos = 0; } myTable.scrollTop = scrollPos; } ``` 这段代码会在页面加载后每20毫秒自动滚动表格，每次滚动1个像素，直到滚动到表格底部时重新从顶部开始滚动。你可以根据需要自行调整滚动速度和滚动距离。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值