使用Element中的InfiniteScroll无限滚动并自定义滚动条样式

一、实现InfiniteScroll无限滚动的简单代码

<template>
  <div class="bg">
    <div class="infinite-list"  style="overflow:auto"> 
        <ul class="infinite-list-item">
          内容
        </ul>
        <ul class="infinite-list-item">
          内容
        </ul>
        <ul class="infinite-list-item">
          内容
        </ul>
        <ul class="infinite-list-item">
          内容
        </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .bg{
    height: 1279px;
    background-color: antiquewhite;
    .infinite-list{
      height: 200px;
      background-color: paleturquoise;
      .infinite-list-item{
        height: 100px;
          background-color: pink;
      }
    }
  }
  </style>

需要注意的是，只有

<ul class="infinite-list-item">

          内容

 </ul>

所有内容盒子的总高度超出了外侧的<div class="infinite-list"  style="overflow:auto"></div>，才会出现滚动效果。

效果如图：

除此之外还有以下属性可供使用

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	是否禁用	boolean	-	false
infinite-scroll-delay	节流时延，单位为ms	number	-	200
infinite-scroll-distance	触发加载的距离阈值，单位为px	number	-	0
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器。	boolean	-	true

二、实现自定义滚动条样式的代码

::-webkit-scrollbar {
  width: 8px; 
}
::-webkit-scrollbar-thumb {
  position: absolute;
  margin-left: 46px;
  background-color: #2272d5;
  border-radius: 3px;
}

效果如图：