.x-scrollbar {
    position: relative;
}

.x-scrollbar__container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.x-scrollbar__container--hideScrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.x-scrollbar__container--hideScrollbar::-webkit-scrollbar {
    display: none !important;
}

.x-scrollbar__container--preventDefault {
    overscroll-behavior: contain;
    -ms-scroll-chaining: none;
}

.x-scrollbar__content {
    display: inline-block;
    vertical-align: middle;
    min-width: 100%;
}

/* 轨道 */
.x-scrollbar__track-x,
.x-scrollbar__track-y {
  overflow: hidden;
    opacity: 1;
    position: absolute;
    z-index: 2;
    transition: background-color 0.2s linear, opacity 0.2s linear;
}

.x-scrollbar__track-x {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
}

.x-scrollbar__track-y {
    top: 0;
    right: 0;
    height: 100%;
    width: 8px;
}

/* 滑块 */
.x-scrollbar__thumb-x,
.x-scrollbar__thumb-y {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
}

.x-scrollbar__thumb-x {
    height: 5px;
    bottom: 0px;
}

.x-scrollbar__thumb-y {
    width: 5px;
    right: 0px;
}

/* 激活后大小 */
.x-scrollbar__track-x:hover .x-scrollbar__thumb-x,
.x-scrollbar__track--draging .x-scrollbar__thumb-x {
    height: 8px;
}

.x-scrollbar__track-y:hover .x-scrollbar__thumb-y,
.x-scrollbar__track--draging .x-scrollbar__thumb-y {
    width: 8px;
}

/* 鼠标移入容器 => 显示滑块 */
.x-scrollbar-keep > .x-scrollbar__track-x,
.x-scrollbar-keep > .x-scrollbar__track-y,
.x-scrollbar:hover > .x-scrollbar__track-x,
.x-scrollbar:hover > .x-scrollbar__track-y {
    opacity: 1;
}

/* 鼠标移入轨道 || 拖动过程中 => 显示轨道 & 高亮滑块 */
.x-scrollbar__track-x:hover,
.x-scrollbar__track-y:hover,
.x-scrollbar__track-x.x-scrollbar__track--draging,
.x-scrollbar__track-y.x-scrollbar__track--draging {
    opacity: 1 !important;
}