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); 
};