<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<style type="text/css">
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.wrap {
600px;
margin: 60px auto auto auto;
}
.wrap-w {
100%;
height: 486px;
border: 1px solid #bfbfbf;
overflow-x: hidden;
overflow-y: scroll;
}
.wrap-w ul {
100%;
}
.wrap-w ul>li {
padding: 0 10px;
box-sizing: border-box;
text-align: center;
height: 40px;
line-height: 40px;
}
.wrap-w ul>li:last-child {
border-bottom: none;
}
</style>
<body>
<div class="wrap">
<div class="wrap-w">
<ul class="c_scroll">
<li>我是A</li>
<li>我是B</li>
<li>我是C</li>
<li>我是D</li>
<li>我是E</li>
<li>我是F</li>
<li>我是G</li>
<li>我是H</li>
<li>我是I</li>
<li>我是J</li>
<li>我是K</li>
<li>我是L</li>
<li>我是M</li>
<li>我是N</li>
<li>我是O</li>
<li>我是P</li>
<li>我是Q</li>
<li>我是R</li>
<li>我是S</li>
<li>我是T</li>
</ul>
</div>
</div>
<div class="wrap">
<div class="wrap-w">
<ul class="c_scroll">
<li>我是A</li>
<li>我是B</li>
<li>我是C</li>
<li>我是D</li>
</ul>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
//原理: 定时器 + 元素 margin-top 向上
var _config = {
speed: 40, //速度
class: $('.c_scroll')//绑定的dom
}
$(document).ready(function() {
var _dom = _config.class; //获取绑定的dom
_dom.each(function (index, item) { //遍历dom ,防止这个是多个滚动
var _height = $(item).height();//获取每一个滚动区域的高
var a = $(item).html();//获取每一个滚动的里面的html ,用户拼接完成无缝衔接
var fatherHeight = $(item).parent().height();//获取每一个滚动区域父元素的高,滚动区高度不如父元素时,不滚动
$(item).append(a);//将获取滚动区的内容拼接到滚动区,用于无缝衔接
var marginTop = 0;//初始化滚动margin
var init =[];//初始化数组,用户创建不同的定时器
if (_height > fatherHeight) {//滚动区高度大于父元素高度,则滚动
init[index]=setInterval(function() { //创建定时器
marginTop = marginTop-1;
$(item).css('margin-top', marginTop);
if (Math.abs(marginTop) > _height) {
marginTop = 0;
}
},_config.speed);
}
$(item).hover( //鼠标移动到滚动区,清除定时器,移出去,则增加
function(){
clearInterval(init[index]);
},
function(){
init[index]=setInterval(function() {
marginTop = marginTop-1;
$(item).css('margin-top', marginTop);
if (Math.abs(marginTop) > _height) {
marginTop = 0;
}
},_config.speed);
}
)
})
})
</script>
</body>
</html>