网页效果 - 无缝滚动原理

最新推荐文章于 2024-07-06 00:08:38 发布

W&T

最新推荐文章于 2024-07-06 00:08:38 发布

阅读量584

点赞数

分类专栏：网页效果文章标签： javascript css html 前端 css3

本文链接：https://blog.csdn.net/qq_43612151/article/details/118356905

版权

网页效果专栏收录该内容

3 篇文章 0 订阅

订阅专栏

无缝滚动

常用场景：公告栏滚动播报、轮播图无缝切换

在滚动元素的后面，复制一个相同的元素，让复制的元素填补出现的空白；

当复制元素滚动到与滚动元素相同的初始状态时，还原元素状态、实现无缝滚动

在这里插入图片描述

例子：公告栏滚动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pb8 {
      padding-bottom: 8px;
    }
    .dib {
      display: inline-block;
    }
    ul , li {
      padding: 0;
      margin: 0;
      list-style: none;
    }
  </style>
</head>
<body>
  <div id="box" style="height: 248px;overflow: hidden;font-size: 13px">
    <ul id="ul1">
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'01fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'02fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'03fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'04fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'05fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'06fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'07fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'08fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'09fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'10fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
      <li class="pb8" style="cursor: pointer">
        <span class="je-dib">'11fklajsdkfjakdjskdjfklajsdkfjaksld对方卡号事件的看法哈跨境电商福建安徽的'</span>
      </li>
    </ul>
    <ul id="ul2"></ul>
  </div>
</body>
<script>
  let scrollInterval = 0;
  const scrollInit = () => {
    const box = document.getElementById('box')
    const ul1 = document.getElementById('ul1')
    const ul2 = document.getElementById('ul2')

    box.scrollTop = 0
    ul2.innerHTML = ul1.innerHTML

    const scroll = () => {
      if (box.scrollTop >= ul1.offsetHeight) {
        box.scrollTop = 0
      } else {
        box.scrollTop++
      }
    }

    scrollInterval = setInterval(scroll, 50)
    // 鼠标悬停时停止滚动
    box.onmouseover = () => {
      console.log('mouse over');
      clearInterval(scrollInterval)
    }
    box.onmouseout = () => {
      scrollInterval = setInterval(scroll, 50)
    }
  }
    scrollInit()
</script>
</html>