/** * Scrollator jQuery Plugin * Scrollator is a jQuery-based replacement for the browsers scroll bar, which doesn't use any space. * version 1.1, July 3rd, 2014 * by Ingi P. Jacobsen */ #scrollator_holder { position: absolute; top: 0; left: 0; width: 0; height: 0; } .scrollator { overflow: hidden !important; } .scrollator_lane_holder { position: absolute; top: 0; right: 0; bottom: 0; -moz-box-sizing: border-box; box-sizing: border-box; width: 10px; background-color: transparent; opacity: 0; -webkit-transition: width 200ms, opacity 200ms; -moz-transition: width 200ms, opacity 200ms; -ms-transition: width 200ms, opacity 200ms; -o-transition: width 200ms, opacity 200ms; transition: width 200ms, opacity 200ms; } .scrollator_lane { position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: rgba(121, 121, 121, 0); -webkit-transition: background 200ms; -moz-transition: background 200ms; -ms-transition: background 200ms; -o-transition: background 200ms; transition: background 200ms; } .scrollator_lane_holder.scrollator_on_body { position: fixed; } .scrollator_lane_holder.hover, .scrollator_lane_holder:hover { width: 10px; } .scrollator_lane_holder.hover > .scrollator_lane, .scrollator_lane_holder:hover > .scrollator_lane { background-color: rgba(121, 121, 121, 0.25); } .scrollator_handle_holder { position: absolute; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 -3px; width: 10px; background-color: transparent; -webkit-transition: width 200ms; -moz-transition: width 200ms; -ms-transition: width 200ms; -o-transition: width 200ms; transition: width 200ms; } .scrollator_handle { position: absolute; top: 0; right: 3px; bottom: 0; left: 3px; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: rgba(121, 121, 121, 0.7); } .scrollator_lane_holder.hover .scrollator_handle_holder, .scrollator_lane_holder:hover .scrollator_handle_holder { width: 10px; }