@maxweek/react-scroller/dist/style.css

Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll

.scroller{flex-grow:1;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;display:flex}.scroller:not(.__autoHide).__bar>.scroller__bar{transform:none!important}.scroller.__autoHide.__hovered.__bar>.scroller__bar{transform:none!important}.scroller.__grab>.scroller__content{cursor:grab}.scroller.__bar .scroller__bar{display:flex}.scroller>.scroller__bar{position:absolute;border-radius:1rem;background-color:#d3d3d384;transition:.2s;display:none;z-index:20}.scroller>.scroller__bar:before{content:"";position:absolute}.scroller>.scroller__bar>.scroller__bar_roller{border-radius:1rem;background-color:#2f2f2f;position:absolute;transition:opacity .2s}.scroller>.scroller__bar>.scroller__bar_roller:hover{opacity:.6;cursor:grab}.scroller>.scroller__bar>.scroller__bar_roller:active{cursor:grabbing}.scroller.__horizontal.__borderFade>.scroller__content{-webkit-mask-image:linear-gradient(to right,transparent 0,black 1rem,black calc(100% - 1rem),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 1rem,black calc(100% - 1rem),transparent 100%)}.scroller.__horizontal.__borderPadding>.scroller__content{padding-left:1rem;padding-right:1rem}.scroller.__horizontal>.scroller__content{overflow-x:scroll;overflow-y:hidden;-ms-overflow-style:none;scrollbar-height:none;scrollbar-width:none;max-width:100%;height:100%}.scroller.__horizontal>.scroller__content::-webkit-scrollbar{height:0px;background:transparent}.scroller.__vertical.__borderFade>.scroller__content{-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 1rem,black calc(100% - 1rem),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black 1rem,black calc(100% - 1rem),transparent 100%)}.scroller.__vertical.__borderPadding>.scroller__content{padding-top:1rem;padding-bottom:1rem}.scroller.__vertical>.scroller__content{overflow-y:scroll;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;max-height:100%;width:100%;flex-direction:column}.scroller.__vertical>.scroller__content::-webkit-scrollbar{width:0px;background:transparent}.scroller.__horizontal.__vertical>.scroller__content{overflow:scroll;-ms-overflow-style:none;scrollbar-height:none;scrollbar-width:none;max-width:100%;max-height:100%}.scroller.__horizontal.__vertical>.scroller__content::-webkit-scrollbar{height:0px;background:transparent}.scroller.__horizontal>.scroller__bar_vertical,.scroller.__vertical>.scroller__bar_vertical{right:.5rem;top:.5rem;bottom:.5rem;width:.15rem;transform:translate(1rem)}.scroller.__horizontal>.scroller__bar_vertical:before,.scroller.__vertical>.scroller__bar_vertical:before{width:1rem;right:-.5rem;top:-.5rem;bottom:-.5rem}.scroller.__horizontal>.scroller__bar_vertical:hover,.scroller.__vertical>.scroller__bar_vertical:hover{width:.5rem}.scroller.__horizontal>.scroller__bar_vertical>.scroller__bar_roller,.scroller.__vertical>.scroller__bar_vertical>.scroller__bar_roller{right:0;width:100%;min-height:1rem;border-radius:1rem;background-color:#2f2f2f;position:absolute;transition:opacity .2s}.scroller.__horizontal>.scroller__bar_vertical>.scroller__bar_roller:hover,.scroller.__vertical>.scroller__bar_vertical>.scroller__bar_roller:hover{opacity:.6;cursor:grab}.scroller.__horizontal>.scroller__bar_vertical>.scroller__bar_roller:active,.scroller.__vertical>.scroller__bar_vertical>.scroller__bar_roller:active{cursor:grabbing}.scroller.__horizontal>.scroller__bar_horizontal,.scroller.__vertical>.scroller__bar_horizontal{left:.5rem;right:.5rem;bottom:.5rem;height:.15rem;width:auto;transform:translateY(1rem)}.scroller.__horizontal>.scroller__bar_horizontal:before,.scroller.__vertical>.scroller__bar_horizontal:before{height:1rem;right:-.5rem;left:-.5rem;bottom:-.5rem}.scroller.__horizontal>.scroller__bar_horizontal:hover,.scroller.__vertical>.scroller__bar_horizontal:hover{height:.5rem;width:auto}.scroller.__horizontal>.scroller__bar_horizontal>.scroller__bar_roller,.scroller.__vertical>.scroller__bar_horizontal>.scroller__bar_roller{bottom:0;height:100%;min-width:1rem;border-radius:1rem;background-color:#2f2f2f;position:absolute;transition:opacity .2s}.scroller.__horizontal>.scroller__bar_horizontal>.scroller__bar_roller:hover,.scroller.__vertical>.scroller__bar_horizontal>.scroller__bar_roller:hover{opacity:.6;cursor:grab}.scroller.__horizontal>.scroller__bar_horizontal>.scroller__bar_roller:active,.scroller.__vertical>.scroller__bar_horizontal>.scroller__bar_roller:active{cursor:grabbing}.scroller>.scroller__content{display:flex}.scroller>.scroller__content.__grabbing{cursor:grabbing}