html:not(.is-safari):not(.is-ios) { .scrollable::-webkit-scrollbar { width: 0; height: 0; opacity: 0; // for safari width: .375rem; } .scrollable::-webkit-scrollbar-thumb { width: 0; height: 0; } ::-webkit-scrollbar-thumb { opacity: 0; transition: .2s ease-in-out; } ::-webkit-scrollbar-button { width: 0; height: 0; display: none; } ::-webkit-scrollbar-corner { background-color: transparent; } .scrollable:hover::-webkit-scrollbar { opacity: 1; // for safari } .scrollable:hover::-webkit-scrollbar-thumb { height: 200px; border-radius: $border-radius-medium; background-color: rgba(0, 0, 0, .2); opacity: 1; } } .scrollable-x::-webkit-scrollbar { display: none; // for safari iOS } .scrollable { width: 100%; height: 100%; overflow-y: hidden; overflow-x: hidden; max-height: 100%; transform: translateZ(0); //@include respond-to(not-handhelds) { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; //} -webkit-overflow-scrolling: touch; &.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; html.is-safari & { overflow-y: scroll; } } &-padding { min-width: 100%; height: 100%; } /* html.is-safari &-padding { margin-right: -6px; } */ }