实现方法:主要通过setInterval定时器来改变滚动条scrollTop高度
效果
使用步骤
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).onclick = () => {
console.log("点击了", timer, flag);
if (flag) {
flag = false;
clearInterval(timer);
} else {
roll();
}
};
roll();
// }, 2000);
},
}
3.dom加载完时调用函数
mounted() {
this.autoSroll("scroll_in2");
},