1.在Vue项目中,使用el-scrollbar需要先安装element-ui框架
<div>
<div class="dash-card">
<!-- 使用el-scrollbar组件创建滚动条 -->
<!-- mouseenter.native 当鼠标进入滚动条时,停止滚动 -->
<!-- mouseleave.native 当鼠标离开滚动条时,开始滚动 -->
<el-scrollbar
@mouseenter.native="stopScroll('scrollDiv1')"
@mouseleave.native="startScroll('scrollDiv1')"
class="scrollbar"
name="scrollBox"
style="height: 100%"
ref="scrollDiv1"
>
<!-- 设置滚动条的引用ref为scrollDiv1 -->
<!-- 使用v-for指令循环渲染50个div元素 -->
<div v-for="item in 50" :key="item" class="send-item">
{{ "滚动" + item }} <!-- 显示滚动加数字的文本 -->
</div>
</el-scrollbar>
</div>
</div>
2.滚动盒子设置样式
<style lang="scss" scoped>
.dash-card {
width: 300px; /* 设置卡片宽度为300像素 */
height: 300px; /* 设置卡片高度为300像素 */
background-color: rgb(201, 141, 23); /* 设置卡片背景颜色 */
}
.scrollbar {
height: 100%; /* 设置滚动条高度为100% */
box-sizing: border-box; /* 设置盒模型为border-box */
padding: 10px; /* 设置内边距为10像素 */
}
/* 使用:deep()选择器来深度选择子组件的样式 */
:deep() .el-scrollbar {
height: 100%; /* 设置滚动条高度为100% */
}
/* 使用:deep()选择器来深度选择子组件的样式 */
:deep() .el-scrollbar__wrap {
overflow-x: hidden; /* 隐藏水平滚动条 */
margin-right: -27px !important; /* 设置右边距为-27像素隐藏竖滚动条*/
}
.send-item {
margin: 0 8px; /* 设置外边距为0和8像素 */
line-height: 30px; /* 设置行高为30像素 */
border-bottom: 1px dashed; /* 设置底部边框为1像素的虚线 */
}
</style>
3. 滚动js方法
mounted() {
// 首次加载默认执行自动滚加载
this.updateScrollTop("scrollDiv1");
},
methods: {
// 开始滚动指定的DOM元素
startScroll(dom) {
// 将dom + "Move"属性的值设为false,表示滚动可以继续进行
this[dom + "Move"] = false;
// 调用updateScrollTop方法来更新滚动位置
this.updateScrollTop(dom);
},
// 停止滚动指定的DOM元素
stopScroll(dom) {
// 将dom + "Move"属性的值设为true,表示滚动应该停止
this[dom + "Move"] = true;
},
// 更新指定DOM元素的滚动位置
updateScrollTop(dom) {
// 获取DOM元素的第一个子元素
let x = this.$refs[dom].$el.children[0];
// 调用scrollThen方法来执行滚动逻辑
this.scrollThen(x, dom).then();
},
// 实际执行滚动逻辑的异步方法
async scrollThen(x, dom) {
let that = this;
// 使用do-while循环和await关键字来实现定时滚动
do {
// 每次滚动后检查是否需要继续滚动,直到dom + "Move"属性为true
await new Promise(resolve => {
// 每隔100毫秒执行一次滚动
setTimeout(() => {
resolve();
}, 100);
});
// 如果滚动高度小于95%的元素高度,则继续滚动
if (parseFloat(x.clientHeight / x.scrollHeight) < 0.95) {
// 如果滚动到底部,则重置滚动位置
if (x.scrollHeight - x.scrollTop === x.clientHeight) {
x.scrollTop = 0;
} else {
// 否则,滚动位置加1
x.scrollTop++;
// console.log(x.scrollTop);
}
}
} while (!that[dom + "Move"]);
},