js实现文字上下滚动(到底回到顶部重复滚动)

逍遥的码农

于 2022-02-09 15:44:24 发布

阅读量1.4k

点赞数 3

分类专栏： js专栏文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_48171107/article/details/122843548

版权

js专栏专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建一个响应用户滚动的列表，当内容超过视口时，通过JavaScript实现逐行加载用户滚动。适合前端开发者了解滚动效果和性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接贴代码

<html>
  <body>
    <head>
      <style>
        #scrolldiv {
          width: 200px;
          height: 100px;
          overflow: hidden;
        }
        ul{
          list-style: none;
        }
      </style>
    </head>
    <div id="scrolldiv" class="scroll">
      <ul>
        <li>开始</li>
        <li>用户:1上下滚动</li>
        <li>用户:2上下滚动</li>
        <li>用户:3上下滚动</li>
        <li>用户:4上下滚动</li>
        <li>用户:5上下滚动</li>
        <li>用户:6上下滚动</li>
        <li>用户:7上下滚动</li>
        <li>用户:8上下滚动</li>
        <li>用户:9上下滚动</li>
        <li>用户:10上下滚动</li>
        <li>用户:11上下滚动</li>
        <li>结束</li>
      </ul>
    </div>
    <script>
      window.onload = roll(40);
      function roll(t) {
        var scrolldiv = document.getElementById("scrolldiv");
        scrolldiv.scrollTop = 0;
        setInterval(rollStart, t);
      }

      function rollStart() {
        //元素内容的真实高度        元素滚动的高度              元素可见的高度
        if (
          scrolldiv.scrollHeight - scrolldiv.scrollTop ===
          scrolldiv.clientHeight
        ) {
          scrolldiv.scrollTop = 0;
        } else {
          scrolldiv.scrollTop++;
        }
      }
    </script>
  </body>
</html>