prefixCls为项目做的样式隔离 项目名前缀

       .${prefixCls}-table-body {
            /**important 为解决乾坤框架内样式优先度被冲掉问题 */
            scrollbar-width: auto;
            scrollbar-color: auto;

            &::-webkit-scrollbar {
              width: 10px;
              height: 10px;
            }

            &::-webkit-scrollbar-track {
              background-color: transparent !important;
            }

            &::-webkit-scrollbar-thumb {
              border: 2px solid transparent !important;
              background-clip: padding-box !important;
              border-radius: 8px;
            }

            &::-webkit-scrollbar-thumb:hover {
              border-width: 0 !important;
            }
          }

image.png

移入加粗版

// 滚动条-移入加粗版
.scrollbar {
  overflow: auto;

  &:hover {
    &::-webkit-scrollbar-thumb:hover {
      border: 0;
      border-radius: 6px;
    }
  }

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    width: 8px;
    height: 8px;
    transition: 0.8s;
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: #c9cdd4;
  }
}

移入显示版

  // 滚动条-移入显示版
  .scrollbar-transparent {
    @extend .scrollbar;
    overflow-y: scroll;

    &:hover {
      &::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        background-clip: padding-box;
        background-color: #c9cdd4;
      }

      &::-webkit-scrollbar-thumb:hover {
        border: 1px solid transparent;
      }
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
  }