弹性布局flex之通过js实现文字向上滚动

最新推荐文章于 2024-12-16 13:44:13 发布

12g_xx

最新推荐文章于 2024-12-16 13:44:13 发布

阅读量395

点赞数

CC 4.0 BY-SA版权

文章标签： js flex弹性布局文字向上滚动

本文链接：https://blog.youkuaiyun.com/qq_41507093/article/details/87965815

本文介绍如何利用JavaScript结合flex布局实现文字向上滚动的无缝循环效果。通过复制flex容器内的div，并根据滚动高度判断何时重置 scrollTop 为0，以达到动态循环滚动的视觉体验。

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

说下具体思路，先把flex布局内的div复制一次，为了实现无缝循环的滚动。
我是把它分成了一行两列的形式，然后通过判断滚动高度是否大于整体滚动框高度的一半，若大于或等于一半时，则scrollTop=0。即回滚到首位。由于过程很短，肉眼看不出差异，便相当于实现了动态无缝循环。
具体代码如下，可自行创建html查看效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>滚动</title>
<style>
#box {
    height:21px;
    overflow:hidden;
}
#box ul{
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
#box li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 50%;
    min-width: 50%;
}
</style>
</head>
<body>
<div id="box">
  <ul>
    <li>我是第1个</li>
    <li>我是第2个</li>
    <li>我是第3个</li>
    <li>我是第4个</li>
  </ul>
</div>
<script>
    var scroll = document.getElementById("box");
    // 复制两列相等的box在html中，以便判断整体高度过后重设回第一列
    scroll.innerHTML += scroll.innerHTML;
    var liHeight = 21;      // li标签的高度
    scroll.scrollTop = 0;   // 起始box的滚动高度
    var delay = 2000;       // 设置延迟时间（每次文字停留的时间）
    var speed = 50;         // 设置文字向上滚动所需花费的时间（速度越大滚动越慢）
    var time;               // 定时器
    // starMove() 字体向上滚动函数
    function starMove() {
      scroll.scrollTop ++;    // box自增
      time = setInterval("scrollUp()", speed);  // 定时器赋值time且在speed时间内调用scrollUp函数
    }

    // scrollUp() 判断滚动字体是否已经滚动完完整的一次
    function scrollUp() {
      // 若滚动的高度与li标签的高度能够整除，则判定为已经完成一次向上滚动
      if(scroll.scrollTop % liHeight==0){
          clearInterval(time);    // 消除定时器功能
          setTimeout("starMove()",delay);    // 设置在delay的时间后再调用starMove()函数
      }
      // 若滚动的高度与li标签的高度不能够整除，则判定为还没完成一次滚动，继续向上滚动
      else{
          scroll.scrollTop++;
          // 此判断为当box的滚动高度已经大于了整体的滚动高度的一半时，则重设滚动高度，回滚到第一列
          if(scroll.scrollTop >= scroll.scrollHeight/2){
            scroll.scrollTop=0;
          }
      }
    }
    // 第一次调用，在delay后开始第一次调用starMove函数
    setTimeout("starMove()",delay);
</script>
</body>
</html>