div.scrollable::-webkit-scrollbar { width: 0; height: 0; } div.scrollable::-webkit-scrollbar-thumb { width: 0; height: 0; } ::-webkit-scrollbar-button { width: 0; height: 0; display: none; } ::-webkit-scrollbar-corner { background-color: transparent; } .scrollable { width: 100%; height: 100%; overflow-y: hidden; overflow-x: hidden; max-height: 100%; //position: relative; //will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; flex-direction: column; &.scrollable-x { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } &.scrollable-y { overflow-y: auto; overflow-y: overlay; scrollbar-width: none; -ms-overflow-style: none; } /* &.scrollable-x ~ .scrollbar-thumb { top: auto; right: auto; width: auto; height: 4px; bottom: 0px; } .scroll-padding { flex: 0 0 auto; &:first-child + * { flex: 1 1 auto; } } */ } /* .scrollbar-thumb { position: absolute; top: 0; right: 2px; width: 4px; //margin-left: 2px; background-color: #000; //cursor: grab; cursor: default; opacity: 0; transition-property: opacity; transition-duration: .2s; transition-timing-function: ease-in-out; display: none; border-radius: $border-radius; z-index: 2; } :hover > .scrollbar-thumb { opacity: .4; } */ // BROWSER SCROLL div.scrollable-y::-webkit-scrollbar { width: .375rem; height: 200px; } /* div.scrollable-y::-webkit-scrollbar-thumb { border: 2px solid rgba(0, 0, 0, 0); background-clip: padding-box; } */ ::-webkit-scrollbar-thumb { opacity: 0; transition: .2s ease-in-out; } div.scrollable:hover::-webkit-scrollbar-thumb { height: 200px; border-radius: $border-radius-medium; background-color: rgba(0, 0, 0, 0.2); opacity: 1; } ::-webkit-scrollbar-button { width: 0; height: 0; display: none; } ::-webkit-scrollbar-corner { background-color: transparent; }