/** initial setup **/ .nano { position : relative; width : 100%; height : 100%; overflow : hidden; } .nano .content { position : absolute; overflow : scroll; overflow-x : hidden; top : 0; right : 0; bottom : 0; left : 0; } .nano .content::-webkit-scrollbar { -webkit-appearance: none; } .nano > .pane { background: rgba(0,0,0,.25); position : absolute; width : 10px; right : 0; top : 0; bottom : 0; visibility: hidden; } .nano > .pane > .slider { background: rgba(0,0,0,.5); position : relative; margin : 0 1px; -moz-border-radius : 3px; -webkit-border-radius : 3px; border-radius : 3px; } .nano:hover > .pane, .pane.active { visibility: visible; } .nano > .pane { -webkit-transition : .2s; -moz-transition : .2s; -ms-transition : .2s; -o-transition : .2s; transition : .2s; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; opacity : .01; } .nano:hover > .pane, .pane.active { opacity : 1; }