中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › js实现列表循环滚动

[前端] js实现列表循环滚动

2800 0
王子 2022-10-21 15:59:08 | 显示全部楼层 |阅读模式
本文实例为大家分享了js实现列表循环滚动的具体代码，供大家参考，具体内容如下
先介绍几个属性
    clientHeight 元素的高度clientTop 元素顶部边框的宽度scrollTop 滚动条遮挡的部分的高度（包含border）scrollHeight 整个内容的高度（包含border）offsetTop 距离上一个 position 不为 static(默认) 的元素的顶部内边框的距离
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <title>列表循环滚动</title>
  7. </head>
  8. <style>
  9.   html,
  10.   body {
  11.     height: 100%;
  12.     width: 100%;
  13.     overflow: hidden;
  14.     background-color: #999;
  15.   }
  17.   .parent {
  18.     width: 728px;
  19.     margin: 200px auto;
  20.     height: 200px;
  21.     overflow: hidden;
  22.     background-color: #fff;
  23.   }
  24. </style>
  26. <body>
  27.   <div id="parent" class="parent">
  28.     <table border="1" cellpadding="18" cellspacing="0" id="child" class="child">
  29.     </table>
  30.     <div id="cloneChild" class="child"></div>
  31.   </div>
  32.   <script type="text/javascript">
  34.     let parent = document.getElementById('parent');
  35.     let child = document.getElementById('child');
  37.     let str = '';
  38.     for (let i = 0; i < 10; i++) {
  39.       str += `<tr>`;
  40.       for (let j = 0; j < 6; j++) {
  41.         str += `<td>第${i}行第${j}列</td>`;
  42.       }
  43.       str += `</tr>`
  44.     }
  46.     child.innerHTML = str;
  47.     let cloneChild = document.getElementById('cloneChild');
  48.     // 深度克隆一份表格 相比 innerHTML 的优势在于可以克隆元素的全部的属性
  49.     let cloneNoe = child.cloneNode(true);
  50.     // 追加到 parent 里面 做无缝切换视觉效果
  51.     parent.appendChild(cloneNoe);
  53.     (function () {
  54.       setInterval(function () {
  55.         // parent.scrollTop + parent.clientHeight = child.scrollHeight;
  56.         // child.scrollHeight - parent.scrollTop = parent.clientHeight;
  57.         // 让他多滚动 parent 一显示区域的高度。再跳到 最顶部 ，正好 给人一种在不断滚动的错觉
  58.         if (parent.scrollTop >= child.scrollHeight) {
  59.           parent.scrollTop = 0;
  60.         } else {
  61.           parent.scrollTop++;
  62.         }
  63.       }, 20);
  64.     })()
  66.   </script>
  67. </body>
  69. </html>
复制代码


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

王子

创始人

关注
  • 1101
    主题
  • 105
    粉丝
  • 59
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天