@include b(scrollbar) { overflow: hidden; position: relative; height: 100%; @include e(wrap) { overflow: auto; height: 100%; @include m(hidden-default) { scrollbar-width: none; &::-webkit-scrollbar { display: none; } } } @include e(thumb) { position: relative; display: block; width: 0; height: 0; cursor: pointer; border-radius: inherit; } @include e(bar) { position: absolute; right: 2px; bottom: 2px; z-index: 1; border-radius: 4px; @include when(vertical) { width: 6px; top: 2px; > div { width: 100%; } } @include when(horizontal) { height: 6px; left: 2px; > div { height: 100%; } } } } .el-scrollbar { ::-webkit-scrollbar { display: none; } overflow: hidden; position: relative; height: 100%; .el-scrollbar__wrap { overflow: auto; height: 100%; .hidden-default { scrollbar-width: none; &::-webkit-scrollbar { display: none; } } } } .el-scrollbar__bar { position: absolute; right: 2px; bottom: 2px; z-index: 1; border-radius: 4px; } .el-scrollbar__bar.is-horizontal { height: 6px; left: 2px; .el-scrollbar__thumb { position: relative; display: block; cursor: pointer; border-radius: inherit; background-color: #000; /*transition: #000;*/ opacity: var(--el-scrollbar-opacity, 0.3); height: 100%; } } .el-scrollbar__bar.is-vertical { width: 6px; top: 2px; .el-scrollbar__thumb { position: relative; display: block; cursor: pointer; border-radius: inherit; background-color: #000; /*transition: #000;*/ opacity: var(--el-scrollbar-opacity, 0.3); } }