.scrollbar { position: absolute; right: 0; bottom: 0; box-sizing: border-box; overflow: hidden; line-height: 0; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; border-radius: 2px; -webkit-touch-callout: none; } .scrollbar.is-hovering { background: rgba(238, 238, 238, 0.4); } .scrollbar.is-dragging { background: rgba(238, 238, 238, 0.6) !important; opacity: 1; } .scrollbar.is-disabled { display: none; } .scrollbar-handle { position: absolute; top: 0; left: 0; line-height: 0; cursor: pointer; background: rgba(224, 224, 224, 0.6); border-radius: 2px; transition: width, height .5s; } .scrollbar.is-dragging .scrollbar-handle { background: rgba(150, 150, 150, 0.8) !important; } .scrollbar.is-hovering .scrollbar-handle { background: rgba(150, 150, 150, 0.6) !important; } .scrollbar.is-dragging, .scrollbar.is-hovering { border-radius: 5px; } .scrollbar.is-dragging .scrollbar-handle, .scrollbar.is-hovering .scrollbar-handle { border-radius: 5px; } .scrollbar-vertical { width: 4px; height: calc(100% - 2 * 5px); margin: 5px 3px; } .scrollbar-vertical.is-dragging, .scrollbar-vertical.is-hovering { width: 10px; margin: 5px 1px; } .scrollbar-vertical .scrollbar-handle { width: 100%; } .scrollbar-horizontal { width: calc(100% - 2 * 5px); height: 4px; margin: 3px 5px; } .scrollbar-horizontal.is-dragging, .scrollbar-horizontal.is-hovering { height: 10px; margin: 1px 5px; } .scrollbar-horizontal .scrollbar-handle { height: 100%; }