实现隐藏滚动条及鼠标悬浮时展示滚动条

鼠标移入前

鼠标移入后

实现代码

<el-card class="content-card">
  <div class="content-card-body" style="height: 100%;">
    <span style="white-space: pre-wrap;">
      {{ data.scopeOfApplication }}
    </span>
  </div>
</el-card>

&-body {
  height: calc(100% - 32px);
  overflow-y: auto;
  // 滑动条样式修改
  &::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  &:hover::-webkit-scrollbar {
    height: 6px;
    background-color: #fff;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: #cdcdcd;
  }
}