.x-scrollbar-container {
  overflow   : hidden !important;
  position   : relative;
  will-change: scroll-position;
}

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

/* 轨道 */
.x-scrollbar__rail-x,
.x-scrollbar__rail-y {
  opacity   : 0;
  position  : absolute;
  z-index   : 2;
  transition: background-color .2s linear, opacity .2s linear;
}

.x-scrollbar__rail-x {
  left       : 0;
  bottom     : 0;
  width      : 100%;
  height     : 15px;
  will-change: left, bottom, opacity, background;
}

.x-scrollbar__rail-y {
  top        : 0;
  right      : 0;
  height     : 100%;
  width      : 15px;
  will-change: right, top, opacity, background;
}

/* 滑块 */
.x-scrollbar__thumb-x,
.x-scrollbar__thumb-y {
  opacity         : .6;
  position        : absolute;
  background-color: #5f5f5f;
  border-radius   : 6px;
  transition      : background-color .2s linear, opacity .2s linear, height .2s ease-in-out, width .2s ease-in-out;
}

.x-scrollbar__thumb-x {
  height: 6px;
  bottom: 2px;
  will-change: left, opacity, height;
}

.x-scrollbar__thumb-y {
  width: 6px;
  right: 2px;
  will-change: top, opacity, width;
}

/* (鼠标移到容器上 || 拖动过程中) 显示滑块 */
.x-scrollbar-keep>.x-scrollbar__rail-x,
.x-scrollbar-keep>.x-scrollbar__rail-y,
.x-scrollbar-container:hover>.x-scrollbar__rail-x,
.x-scrollbar-container:hover>.x-scrollbar__rail-y,
.x-scrollbar__rail-x.x-scrollbar__rail-draging,
.x-scrollbar__rail-y.x-scrollbar__rail-draging {
  opacity: .6;
}

/* (鼠标移到轨道上 || 拖动过程中) 显示轨道 */
.x-scrollbar__rail-x:hover,
.x-scrollbar__rail-y:hover,
.x-scrollbar__rail-x.x-scrollbar__rail-draging,
.x-scrollbar__rail-y.x-scrollbar__rail-draging {
  background-color: #ddd;
}

/* (鼠标移到轨道上 || 拖动过程中) 高亮滑块 */
.x-scrollbar__rail-x:hover .x-scrollbar__thumb-x,
.x-scrollbar__rail-y:hover .x-scrollbar__thumb-y,
.x-scrollbar__rail-x.x-scrollbar__rail-draging .x-scrollbar__thumb-x,
.x-scrollbar__rail-y.x-scrollbar__rail-draging .x-scrollbar__thumb-y {
  opacity: 1;
}

.x-scrollbar__rail-x:hover .x-scrollbar__thumb-x,
.x-scrollbar__rail-x.x-scrollbar__rail-draging .x-scrollbar__thumb-x {
  height: 11px;
}

.x-scrollbar__rail-y:hover .x-scrollbar__thumb-y,
.x-scrollbar__rail-y.x-scrollbar__rail-draging .x-scrollbar__thumb-y {
  width: 11px;
}