自定义实现滚动条平滑滚动,上接(利用vue 插槽实现滚动分页):https://blog.csdn.net/caroline_Luoluo/article/details/84338803
<div class="ScrollView" ref="ScrollView">
// 内容省略
</div>
private setScrollAnimate() {
const obj = this.$refs.ScrollView as HTMLDivElement;
const total = 1000 // 滚动总距离
let distance = obj.scrollTop;
let step = total/ 50;
if (total > distance) {
smoothDown()
} else {
const newTotal = distance - total;
step = newTotal / 50;
smoothUp()
}
// 向下滚动
function smoothDown() {
if (distance < total) {
distance += step;
obj.scrollTop = distance;
setTimeout(smoothDown, 10)
} else {
obj.scrollTop = total
}
}
// 向上滚动
function smoothUp() {
if (distance > total) {
distance -= step;
obj.scrollTop = distance;
setTimeout(smoothUp, 10)
} else {
obj.scrollTop = total
}
}
}