话不多说先上效果图
实现
1.Element Plus 中自带的Scrollbar 滚动条 并不支持滚动 所以我们需要自己去定义一个盒子增加滚动的CSS
2.滚动中通过少量多次的行为去避免卡卡的效果
3.CSS滚动条样式美化与自定义
4.通过当前盒子绑定的ref去监听盒子总高度,滚动高度,距离高度
5.通过window.setInterval('用户执行滚动的方法','多少毫秒执行一次'),去增加自执行方法
然后上代码
// 测试实现功能
<template>
<div class="scroll-container" ref="scrollContainer">
<!-- 假设你有一个列表 -->
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
const scrollContainer = ref<HTMLElement | null>(null);
const items = [...Array(50).keys()].map(i => `${generateRandomChinese(3)}${i + 1}`); // 示例数据
let intervalId: number | null = null;
const scrollToBottom = () => {
if (scrollContainer.value) {
scrollContainer.value.scrollTop += 2; // 每次滚动的像素值
if (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight == scrollContainer.value.scrollTop) scrollContainer.value.scrollTop = 0 // 当以滚动高度与代码需要高度一致时将其重置并持续循环
if (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight / 2 < scrollContainer.value.scrollTop) {
clearInterval(intervalId as number);
}
}
};
/// 随机生成汉字方法 指定位数
function generateRandomChinese(length) {
var result = '';
var chineseChars: any = [];
// 生成汉字数组
for (var i = 0x4e00; i <= 0x9fa5; i++) {
chineseChars.push(String.fromCharCode(i));
}
// 随机生成汉字字符串
for (var j = 0; j < length; j++) {
var randomIndex = Math.floor(Math.random() * chineseChars.length);
result += chineseChars[randomIndex];
}
return result;
}
onMounted(() => {
intervalId = window.setInterval(scrollToBottom, 20); // 每20毫秒执行一次滚动
});
onUnmounted(() => {
if (intervalId) {
clearInterval(intervalId);
}
});
</script>
<style lang="scss">
.scroll-container {
height: 100%;
overflow: auto;
}
/// 滚动条样式模块设置
.scroll-container::-webkit-scrollbar {
display: none;
}
.scroll-container::-webkit-scrollbar {
width: 10px;
}
/* 定义滚动条轨道的样式 */
.scroll-container::-webkit-scrollbar-track {
background: #f00;
}
/* 定义滚动条的样式 */
.scroll-container::-webkit-scrollbar-thumb {
background: yellow;
}
/* 当鼠标放在滚动条上时的样式 */
.scroll-container::-webkit-scrollbar-thumb:hover {
background: green;
}
</style>