Vue 实现无线滚动效果

目录

1.Element-plus官网中的Infinite Scroll组件说明

2.滚动条设置

3.滚动到底部的函数调用

---

1.Element-plus官网中的Infinite Scroll组件说明

官网链接如下所示： 

Infinite Scroll 无限滚动 | Element Plus

首先查看该代码，发现这个组件使用了一个名为v-infinite-scroll的指令

通过查看指令说明：

 再观察示例代码，就可以知道原来当滚动到底部的时候就会调用v-infinite-scroll指令，而这个指令的类型是函数，说白了就是当滚动到底部的时候就会调用v-infinite-scroll指令所指定的函数

2.滚动条设置

如果发现滚动条的样式不符合自己的预期，可以尝试进行修改

/* 设置滚动条的宽度 */
::-webkit-scrollbar {width: 12px; 
}/* 设置滚动滑块的颜色和形状 */
::-webkit-scrollbar-thumb {background-color: #636363; /* 滑块颜色 */border-radius: 6px; /* 滑块圆角 */height: 40px; /* 设置滚动条的高度 */
}/* 设置滚动轨道的颜色 */
::-webkit-scrollbar-track {background-color: #f1f1f1; /* 轨道颜色 */border-radius: 6px; /* 轨道圆角 */
}

3.滚动到底部的函数调用

因为我发现滚动到底部时，滚动条距离底部的位置太近了，我希望能设置远一些，所以，我这里通过 window.scrollTo(scrollTop, scrollTop-2600);设置当前的位置-2600为滚动条的位置

// 定义处理滚动事件的方法
const handleScroll = () => {// 获取当前滚动条的位置const scrollTop = window.pageYOffset || document.documentElement.scrollTop;// 如果你需要设置滚动位置，可以使用：window.scrollTo(scrollTop, scrollTop-2600);
};const count = ref(0)// 滑动到底部触发事件
const load = () => {count.value += 2;console.log('load more');setTimeout(() => {handleScroll();}, 1000); 
};