原生js实现文字循环向上滚动效果

最新推荐文章于 2024-12-25 16:40:48 发布

神明也惧我赵昊

最新推荐文章于 2024-12-25 16:40:48 发布

阅读量990

点赞数 2

分类专栏：前端学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_55980258/article/details/129134683

版权

前端学习笔记专栏收录该内容

8 篇文章

订阅专栏

该文章介绍如何用JavaScript实现文字循环向上滚动的效果，通过设置CSS样式隐藏超出部分，然后利用JS动态改变scrollTop属性，当滚动到一定位置时克隆并添加内容，以实现无缝滚动。同时，文章提供了一个简单的HTML结构和相应的JS代码示例。

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

原生js实现文字循环向上滚动效果

css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度，最好比内容区域高度低点，产生滚动条)

   #scrollArea {
        width: 400px; 
        height: 150px; 
        border: 2px solid blue; 
        overflow: hidden
      }

html结构部分

   <div id="scrollArea">
      <ul>
        <li>生存，就是最谨慎的战斗。</li>
        <li>到达胜利之前，无法回头。</li>
        <li>净化的终点是自我毁灭。</li>
        <li>没有永恒的朋友，只有永恒的利益。</li>
        <li>不能击败我的，会让我更强大。</li>
        <li>静如影，疾如风。不动如山，迅烈如火。</li>
        <li>别在来不及的时候后悔。</li>
        <li>最好的剑，永远是下一把。</li>
      </ul>
    </div>

js部分

/**
       * scrollTop  (滚动的高度既能‘设置'滚动值，也能‘获取'滚动值)
       * clientHeight 元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距
       * scrollHeight 元素内容的高度，包括溢出的不可见内容
       */
      //时间间隔
      var delay = 50
      //定时器任务
      var handler = function () {
        //向上移动1px
        $('#scrollArea').scrollTop = $('#scrollArea').scrollTop + 1
        if (Math.ceil($('#scrollArea').clientHeight + $('#scrollArea').scrollTop) >= $('#scrollArea').scrollHeight) {
          var ulCopy = $('#scrollArea').firstElementChild.cloneNode(true)
          $('#scrollArea').append(ulCopy)
          //当克隆的ul达到一定数量时，删除第一个ul
          if (document.getElementsByTagName('ul') && document.getElementsByTagName('ul').length >= 3) {
            $('#scrollArea').removeChild($('#scrollArea').firstElementChild)
          }
        }
      }
      //启动定时器
      setInterval(handler, delay)
      function $(selector) {
        return document.querySelector(selector)
      }