需求
这几天做一个大屏可视化项目时，遇到一个需求，当某区域出现滚动条时，让它循环滚动展示数据。
当然，作为一个优秀的开发，我们还可以优化一下：鼠标放上去的时候，停止自动滚动；鼠标移开区域，重新开始滚动。
实现
基本实现思路
实现功能之前，我们需要了解三个参数
- 可视高度clientHeight
- 滚动条距离顶部的高度scrollTop
- 滚动区域高度scrollHeight
根据上图的信息，我们很容易实现滚动条的自动滚动逻辑：
scrollHeight 大于clientHeight时，元素需要滚动，scrollTop++；当scrollTop + clientHeight等于scrollHeight时，即元素滚动到底部，我们再让scrollTop等于0即可。
转换成代码：
// 获取滚动区域的DOM
let parentDom = document.getElementById("XXX")
// 判断是否有滚动条
if(parentDom.scrollHeight <= parentDom.clientHeight) return
// 如果滚动到底部,scrollTop = 0;
if (
parentDom.scrollTop + parentDom.clientHeight ===
parentDom.scrollHeight
) {
parentDom.scrollTop = 0;
} else {
// 滚动条自增
parentDom.scrollTop++;
}
当然，我们需要设置一个定时器，让这个逻辑重复执行。
const scroll = () => {
// 上述代码
};
let timer= setInterval(scroll, 100);
至此，我们的基本思路就完成了。当我们项目中有多个这样需要滚动的区域时，我们应该将这个方法封装，进行复用。
代码封装与复用
我们以主流的vue为例，进行代码封装，最合适的方式应该是将其作为vue中的指令使用。
阅读以下教程，需要您具备vue指令基础知识，可以参考vue官网教程。
指令的基本结构
首先，我们创建scroll.js文件，写入指令的最基本结构
// 实现滚动条自动滚动功能
const directive = {
inserted(el, binding) {
...
},
};
export default directive
main.js中引入该文件
import Vue from "vue";
import App from "./App.vue";
import directive from "./change";
Vue.config.productionTip = false;
// 注册名为 scroll 的指令
Vue.directive("scroll", directive);
new Vue({
render: (h) => h(App),
}).$mount("#app");
此时，我们创造了一个名为v-scroll的指令，我们直接使用
// App.vue
<template>
<div id="app" v-scroll>
// XXXXX这里是您的自定义html
</div>
</template>
完善指令
结合我们最开始的实现思路，可以完善指令
// js实现动态变化的数字
const directive = {
inserted(el) {
//el就是绑定的dom对象
if (!el) return;
const scroll = () => {
let parentDom = el;
// 判断是否有滚动条
if(parentDom.scrollHeight <= parentDom.clientHeight) return
//判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (
parentDom.scrollTop + parentDom.clientHeight ===
parentDom.scrollHeight
) {
parentDom.scrollTop = 0;
} else {
parentDom.scrollTop++; // 元素自增距离顶部
}
};
let timer = setInterval(scroll, 100);
};
export default directive;
现在我们指令的功能就完成了。当然，它还有个缺陷，鼠标移入这个元素的时候不能自动停止，移开这个区域不能恢复自动滚动。我们只需要在dom上绑定onmouseenter和onmouseleave事件即可。
inserted(el) {
// .....
let timer = setInterval(scroll, rate);
el.onmouseenter = () => {
clearInterval(timer);
timer = null;
};
el.onmouseleave = function () {
timer = setInterval(scroll, 100);
};
},
},
指令传值
更优的，这个滚动速度我们还可以自定义，通过元素来传值。vue指令钩子函数的的第二个参数binding.value可以接受参数。
// App.vue
<template>
<div id="app" v-scroll="100">
// XXXXX这里是您的自定义html
</div>
</template>
此时，binding.value的值就是100，我们进一步优化代码
inserted(el, binding) {
const rate = binding?.value ?? 100;
if (!el) return;
const scroll = () => {
// ...省略
};
let timer: any = setInterval(scroll, rate);
el.onmouseenter = () => {
clearInterval(timer);
timer = null;
};
el.onmouseleave = function () {
timer = setInterval(scroll, rate);
};
},
大功告成！！
看完有收获的话，来个一键三连吧！