Customize scrollbar style in webkit browser
SCSS
.scrollbar { max-height: 360px; overflow: auto; } .scrollbar::-webkit-scrollbar{ width:6px; height:9px; } .scrollbar::-webkit-scrollbar-button:start:decrement, .scrollbar::-webkit-scrollbar-button:end:increment{ display:block; height:0; background-color:transparent; } .scrollbar::-webkit-scrollbar-track-piece { background-color:transparent; -webkit-border-radius:0; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; } .scrollbar::-webkit-scrollbar-thumb:vertical{ height:50px; background-color:transparent; -webkit-border-radius:8px; } .scrollbar::-webkit-scrollbar-thumb:horizontal{ width:50px; background-color:transparent; -webkit-border-radius:8px; }
Hide scrollbar in all browsers
SCSS
.scrollbar-hide { &::-webkit-scrollbar { width: 0; height: 0; } // webkit -ms-overflow-style: none; // hide scrollbar in Edge&IE overflow: -moz-scrollbars-none; // FF }