beauty-scroll-container
Version:
A react component that provider a beauty scroll container
2 lines (1 loc) • 1.36 kB
CSS
.beauty-scroll-container{position:relative}.beauty-scroll-horizontal-scrollable .beauty-scroll-indicator-left,.beauty-scroll-horizontal-scrollable .beauty-scroll-indicator-right{display:block}.beauty-scroll-vertical-scrollable .beauty-scroll-indicator-top,.beauty-scroll-vertical-scrollable .beauty-scroll-indicator-bottom{display:block}.beauty-scroll-reach-left .beauty-scroll-indicator-left{opacity:0}.beauty-scroll-reach-right .beauty-scroll-indicator-right{opacity:0}.beauty-scroll-reach-top .beauty-scroll-indicator-top{opacity:0}.beauty-scroll-reach-bottom .beauty-scroll-indicator-bottom{opacity:0}.beauty-scroll-content{width:100%;height:100%;overflow:auto}.beauty-scroll-content::-webkit-scrollbar{display:none}.beauty-scroll-indicator{display:none;position:absolute;transition:opacity 0.2s cubic-bezier(0.2, 0, 0.4, 1);pointer-events:none}.beauty-scroll-indicator-left{left:0;top:0;bottom:0;width:6px;background:linear-gradient(to left, transparent, currentColor)}.beauty-scroll-indicator-right{right:0;top:0;bottom:0;width:6px;background:linear-gradient(to right, transparent, currentColor)}.beauty-scroll-indicator-top{left:0;right:0;top:0;height:6px;background:linear-gradient(to top, transparent, currentColor)}.beauty-scroll-indicator-bottom{left:0;right:0;bottom:0;height:6px;background:linear-gradient(to bottom, transparent, currentColor)}