说下具体思路，先把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");
// 复
最低0.47元/天 解锁文章
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
