vue 列表滚动

   <div class="main" v-if="false">
        <div class="mainlist" v-for="item,index in lists" :key="index">
          <div class="">{{item.name}}</div>
          <div class="">{{item.value}}</div>
        </div>
      </div>


css
列表样式
.main {
  height: 2rem;
  overflow: hidden;
  overflow-y: auto;
  width: 80%;
  .mainlist {
    display: flex;
    justify-content: space-between;
    line-height: 0.5rem;
    background: url('~@/assets/images/bk1.png') no-repeat;
    background-size: 100% 100%;
    padding: 0.1rem;
    margin: 0.1rem;
  }
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: rgba(0, 238, 255, 0.4);

  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 238, 255, 0.4);
}