实现数据自下向上无限滚动

类似与这种效果

有时候我们做可视化大图时，可能会用到这种效果，就是把数据无限滚动，鼠标经过时，它会暂停，点击时，会跳转等等一些效果。

主要用到了动画（animation），鼠标经过暂停用到了（animation-play-state）这个属性。为了看起来像是无限滚动，我们需要克隆数据的前几条，这里我直接把节点全克隆了一份，放到了末尾。如果用vue或者react，这里肯定是循环渲染（v-for / map），就只需要往数据源里面，再把前几条克隆几条放到数据源末尾就行了。往后台传的时候，把末尾加入的那几条去掉即可

demo.html

<!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>
    <link rel="stylesheet" href="./demo.css">
</head>

<body>
    <div class="box">
        <div class="content">
            <ul>
                <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>
            </ul>
        </div>
    </div>
    <script>
        const ul = document.querySelector('.content ul')
        const lis = ul.querySelectorAll('li')
        lis.forEach(item => {
            let newNode = item.cloneNode(true)
            ul.appendChild(newNode)
        })
    </script>
</body>

</html>

demo.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

li {
  list-style: none;
}

.box {
  width: 300px;
  height: 300px;
  background-color: pink;
  margin: 20px auto;
  overflow: hidden;
}

.box .content li {
  height: 30px;
  border-bottom: 1px solid #000;
  cursor: pointer;
}

.box .content {
  animation: move 10s linear infinite;
}

/* 向上滚动的动画 */
@keyframes move {
  100% {
    transform: translateY(-50%);
  }
}

/* 鼠标经过就暂停 */
.box .content:hover {
  animation-play-state: paused;
}

其他方向都是同理，只需要改一下动画就行了

实现数据自下向上无限滚动

猜你喜欢