.lh-scrollbar {
  overflow: hidden;
  width: 100%;
  position: relative;
  .lh-scrollbar__wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;//默认hidden，组件内根据组件的内容是否溢出来调整overflow
    font-size: 0; // https://www.jianshu.com/p/efded211db2f  为什么要设置 font-size为0呢。因为下面的 display:inline-block 会导致 3px溢出。好像是把折行 -text-之类的认为是内容
    .lh-scrollbar__view {
      display: inline-block;
    }
  }
  .lh-scrollbar__bar {
    position: absolute;
    transition: 500ms;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    //给scroll__bar设置一个显示隐藏的动画效果
    &.show {
      opacity: 1;
      visibility: visible;
      z-index: 10;
    }
    &.is-horizontal {
      height: 6px;
      width: 100%;
      left:0;
      bottom: 0;
      .lh-scrollbar__thumb {
        height: 100%;
      }
    }
    &.is-vertical {
      height: 100%;
      width: 6px;
      right: 0;
      top:0;
      .lh-scrollbar__thumb {
        width: 100%;
      }
    }
  }
  .lh-scrollbar__thumb {
    user-select:none;//在mousemove的dom上添加css样式 user-select: none; 防止鼠标变成🚫(禁止) 这个图标，从而导致无法选中。
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: 3px;
    background-color: @color_b5;
    &.active {
      background-color: @color_b3;
    }
  }
}
//隐藏原生scrollbar，其他地方也用
.lh-scrollbar-native-hide {
  -ms-overflow-style: none;/* IE 10+ */
  scrollbar-width: none;/* firefox */
  scrollbar-height: none;/* firefox */
}
.lh-scrollbar-native-hide::-webkit-scrollbar {
  width: 0!important; /* Chrome Safari */
  height:0!important /* Chrome Safari */
}