css-自定义滚动条

<template>
  <div style="width: 50%;height: 100%;overflow-y: auto" class="zm-scrollbar">
    <div style="height: 6000px"></div>
  </div>
</template>

<script>
  export default {
    name: "a17"
  }
</script>

<style>
  .zm-scrollbar {
    --scrollbar-width: 0px;
    cursor: pointer;
  }

  .zm-scrollbar * {
    cursor: auto;
  }

  .zm-scrollbar:hover {
    --scrollbar-width: 8px;
  }

  /*滚动条整体*/
  .zm-scrollbar::-webkit-scrollbar {
    width: var(--scrollbar-width);
  }

  /*滑轨样式*/
  .zm-scrollbar::-webkit-scrollbar-track {
    box-shadow: 0 0 calc(var(--scrollbar-width) / 2) #cccccc inset;
    border-radius: calc(var(--scrollbar-width) / 2);
  }

  /*滑块样式*/
  .zm-scrollbar::-webkit-scrollbar-thumb {
    border-radius: calc(var(--scrollbar-width) / 2);
    background-color: #999999;
  }

  /*角落样式*/
  .zm-scrollbar::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0);
  }

  .zm-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #666666;
  }
</style>