參考（vue js 添加自動(dòng)滾動(dòng)效果(單擊滾動(dòng)暫停碍扔，再次點(diǎn)擊繼續(xù)滾動(dòng))）https://blog.csdn.net/weixin_43245095/article/details/107982250
實(shí)現(xiàn)方法：主要通過(guò)setInterval定時(shí)器來(lái)改變滾動(dòng)條scrollTop高度
效果
20200813164152701.gif
使用步驟
1.在需要滾動(dòng)的區(qū)域添加指定id屬性
<div id="scroll_in2" class="htp-list scroll_in"></div>
2.函數(shù)
methods: {
// 添加自動(dòng)滾動(dòng)
/*
Id 需要滾動(dòng)的區(qū)域 id名稱
*/
autoSroll(Id) {
// flag 為true時(shí)停止?jié)L動(dòng)
var flag = false;
// 定時(shí)器
var timer;
function roll() {
var h = -1;
timer = setInterval(function() {
flag = true;
//獲取當(dāng)前滾動(dòng)條高度
var current = document.getElementById(Id).scrollTop;
if (current == h) {
//滾動(dòng)到底端,返回頂端
h = 0;
document.getElementById(Id).scrollTop = h + 1;
} else {
//以25ms/3.5px的速度滾動(dòng)
h = current;
document.getElementById(Id).scrollTop = h + 1;
}
}, 50);
}
// setTimeout(function() {
//滾動(dòng)區(qū)域內(nèi)鼠標(biāo)劃過(guò) 滾動(dòng)暫停 鼠標(biāo)劃出 繼續(xù)滾動(dòng)
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加載完時(shí)調(diào)用函數(shù)
mounted() {
this.autoSroll("scroll_in2");
},
