参考（vue js 添加自动滚动效果(单击滚动暂停，再次点击继续滚动)）https://blog.csdn.net/weixin_43245095/article/details/107982250
实现方法：主要通过setInterval定时器来改变滚动条scrollTop高度
效果
20200813164152701.gif
使用步骤
1.在需要滚动的区域添加指定id属性
<div id="scroll_in2" class="htp-list scroll_in"></div>
2.函数
methods: {
// 添加自动滚动
/*
Id 需要滚动的区域 id名称
*/
autoSroll(Id) {
// flag 为true时停止滚动
var flag = false;
// 定时器
var timer;
function roll() {
var h = -1;
timer = setInterval(function() {
flag = true;
//获取当前滚动条高度
var current = document.getElementById(Id).scrollTop;
if (current == h) {
//滚动到底端,返回顶端
h = 0;
document.getElementById(Id).scrollTop = h + 1;
} else {
//以25ms/3.5px的速度滚动
h = current;
document.getElementById(Id).scrollTop = h + 1;
}
}, 50);
}
// setTimeout(function() {
//滚动区域内鼠标划过 滚动暂停 鼠标划出 继续滚动
document.getElementById(Id).onmouseover = () => {
// console.log("onmouseover", timer, flag);
flag = false;
clearInterval(timer);
};
document.getElementById(Id).onmouseout = () => {
console.log("onmouseout", timer, flag);
flag = true;
roll();
};
roll();
// }, 2000);
},
}
3.dom加载完时调用函数
mounted() {
this.autoSroll("scroll_in2");
},
