image.png
<!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>
</head>
<body>
<div class="infinite-scroll-wrap">
<ul class="header-wrap">
<li class="header">序号</li>
<li class="header">商品名称</li>
<li class="header">价格</li>
<li class="header">数量</li>
</ul>
<div class="scroll-wrap">
<div class="content-wrap">
<ul class="body-wrap">
<li class="header">1</li>
<li class="header">苹果</li>
<li class="header">12</li>
<li class="header">5</li>
</ul>
<ul class="body-wrap">
<li class="header">2</li>
<li class="header">香蕉</li>
<li class="header">9</li>
<li class="header">4</li>
</ul>
<ul class="body-wrap">
<li class="header">3</li>
<li class="header">橘子</li>
<li class="header">13</li>
<li class="header">7</li>
</ul>
<ul class="body-wrap">
<li class="header">4</li>
<li class="header">火龙果</li>
<li class="header">16</li>
<li class="header">1</li>
</ul>
</div>
<!-- 需要复制一个跟上面一样的内容 -->
<div class="content-wrap">
<ul class="body-wrap">
<li class="header">1</li>
<li class="header">苹果</li>
<li class="header">12</li>
<li class="header">5</li>
</ul>
<ul class="body-wrap">
<li class="header">2</li>
<li class="header">香蕉</li>
<li class="header">9</li>
<li class="header">4</li>
</ul>
<ul class="body-wrap">
<li class="header">3</li>
<li class="header">橘子</li>
<li class="header">13</li>
<li class="header">7</li>
</ul>
<ul class="body-wrap">
<li class="header">4</li>
<li class="header">火龙果</li>
<li class="header">16</li>
<li class="header">1</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<style>
.infinite-scroll-wrap {
display: inline-block;
}
.header-wrap,
.body-wrap {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-wrap li,
.body-wrap li {
width: 100px;
/* border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc; */
text-align: center;
}
/* 高度等于content-wrap的高度 */
.scroll-wrap {
height: 85px;
overflow: hidden;
}
.content-wrap {
transform: translateY(0);
animation: scroll-effect infinite 3s linear;
}
@keyframes scroll-effect {
from {
transform: translateY(0);
}
to {
transform: translateY(-85px);
/* 移动的距离是content-wrap的高度，然后infinite折返回来，这样就看不出破绽了 */
}
}
.header-wrap {
background-color: rgba(99,110,122);
color: #fff;
}
.body-wrap:nth-child(odd) {
background-color: rgb(239,239,239);
}
.body-wrap {
font-size: 13px;
padding: 2px;
}
</style>
另外 vue的无限滚动 插件
npm i vue-seamless-scroll
