css 实现滚动条自由

图片.png
图片.png

需求：鼠标悬停出现滚动条，鼠标离开隐藏滚动条

原理：

<div class="test test-1">
      <div class="scrollbar"></div>
</div>

  .test {
  width   : 50px;
  height  : 200px;
  overflow: auto;
  float   : left;
  margin  : 5px;
  border  : none;
  }
  .scrollbar {
  width : 30px;
  height: 300px;
  margin: 0 auto;
  }
  .test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }

实战：

     <div class="mian-nav-list nav-list">
        <div class="main-nav-list-top">
          <img class="logo" :src="$utils.getPng('menu_logo')" />
          <el-menu class="nav-item" default-active="0">
            <el-menu-item
              :class="{on:basepath==item.path}"
              v-for="item in navData"
              :key="item.id"
              :index="item.id"
              @click="chooseItem(item.title)"
            >
              <img class="nav-item-img" :src="item.url" />
              <span class="nav-item-title">{{item.title}}</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="main-nav-list-bottom">
          <div
            class="nav-item"
            v-for="item in bottomNav"
            :key="item.id"
            @click="chooseItem(item.title)"
          >
            <img class="nav-item-img" :src="item.url" />
            <span class="nav-item-title">{{item.title}}</span>
          </div>
        </div>
      </div>

.nav-list::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    .nav-list::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
    }
    .nav-list::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 10px;
      background: #fff;
    }

    .mian-nav-list {
      &:hover {
        overflow-y: auto;
        overflow-x: hidden;
      }
      &:hover::-webkit-scrollbar-thumb {
        background-color: #cfcfcf !important;
        border-radius: 5px;
      }

      border-radius: 20px 0 0 20px;
      width: 214px;
      overflow: hidden;
      height: 100%;
      background-color: #ffffff;
      @include columnBetween;
      padding-left: 24px;
      .main-nav-list-top {
        margin: 40px 0;
        .logo {
          margin-left: 6px;
          width: 148px;
          height: 42px;
          margin-bottom: 40px;
        }
        .el-menu {
          width: 170px;
          overflow: hidden;
          border: 0;
          .el-menu-item {
            margin-bottom: 12px;
            @include height(60px);
            padding: 0 16px !important;
            font-size: 17px;
            color: #5e6c93 !important;
            border-radius: 11px !important;

            &:hover,
            &.on {
              color: #5090fd !important;
              background-color: #f2f7ff !important;
              border-radius: 11px !important;
            }
          }
        }
        .nav-item {
          .nav-item-img {
            padding-top: 9px;
            margin-right: 12px;
            width: 40px;
            height: 40px;
          }
        }
      }
      .main-nav-list-bottom {
        margin-bottom: 45px;
        width: 170px;
        height: 93px;
        background-color: #f8f9fd;
        border-radius: 16px;
        padding: 0 14px;
        @include column;
        .nav-item {
          @include rowCenter;
          @include height(45px);
          color: #5e6c93;
          font-size: 14px;
          .nav-item-img {
            margin-right: 12px;
            width: 18px;
            height: 18px;
          }
        }
        .nav-item:first-child {
          border-bottom: solid 1px #e7eaf8;
        }
      }
    }