javascript新闻向上停顿1秒后继续滚动
最近在写一些移动端的页面，看到平时一些插件的新闻向上滚动效果都是鼠标一进去才会停止，然后我下面写了一个类似的，但是功能不一样，
功能介绍：向上滚动固定的高度后停顿1-2s展示，然后继续滚动
<html>
<head>
<title>vue</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
*{list-style: none;padding:0px;margin:0px;}
#app{height:30px;border:1px solid #ccc;overflow: hidden;width:300px;margin:50px auto;}
#app li{line-height: 30px;padding:0 10px;height: 30px;}
</style>
</head>
<body>
<div id="app">
<ul id="slide1">
<li>11111111111111111111111111111</li>
<li>22222222222222222222222222222</li>
<li>33333333333333333333333333333</li>
<li>44444444444444444444444444444</li>
<li>55555555555555555555555555555</li>
<li>66666666666666666666666666666</li>
<li>77777777777777777777777777777</li>
<li>88888888888888888888888888888</li>
<li>99999999999999999999999999999</li>
<li>00000000000000000000000000000</li>
</ul>
<ul id="slide2"></ul>
</div>
</body>
<script>
var speed = 40;
var app = document.getElementById('app');
var slide1 = document.getElementById('slide1');
var slide2 = document.getElementById('slide2');
slide2.innerHTML = slide1.innerHTML;
var timer ,timeout;
function marqueeMethods(){
clearTimeout(timeout)
if(slide2.offsetTop-app.scrollTop<=0){
app.scrollTop = app.scrollTop - slide1.offsetHeight;
}else{
app.scrollTop++;
if(app.scrollTop%30==0){
clearTimeout(timeout);
clearInterval(timer);
timeout = setTimeout(function(){
app.scrollTop++;
return timer = setInterval(marqueeMethods,speed);
},1000);
}
}
}
timer = setInterval(marqueeMethods,speed);
</script>
</html>
