forked from FormstoneClassic/Scroller
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.fs.scroller.css
43 lines (38 loc) · 2.25 KB
/
jquery.fs.scroller.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*
* Scroller v3.0.4 - 2014-04-08
* A jQuery plugin for replacing default browser scrollbars. Part of the Formstone Library.
* http://formstone.it/scroller/
*
* Copyright 2014 Ben Plum; MIT Licensed
*/
.scroller { overflow: hidden; overflow-x: hidden; overflow-y: hidden; position: relative; }
.scroller-content { height: 100%; overflow: auto; overflow-x: hidden; overflow-y: auto; position: relative; z-index: 1;
-webkit-overflow-scrolling: touch;
}
.scroller-bar { background: #FBFBFB; border-left: 1px solid #EEEEEE; display: none; height: 100%; position: absolute; right: 0; top: 0; width: 20px; z-index: 2; }
.scroller-track { background: #FBFBFB; height: 100%; overflow: hidden; position: relative; width: 100%; }
.scroller-handle { background: #EEEEEE; border: 1px solid #D5D5D5; border-radius: 5px; cursor: pointer; height: 20px; overflow: hidden; position: absolute; right: 5px; top: 0; width: 10px; z-index: 2;
-webkit-transition: right 0.1s linear, width 0.1s linear;
-moz-transition: right 0.1s linear, width 0.1s linear;
-ms-transition: right 0.1s linear, width 0.1s linear;
-o-transition: right 0.1s linear, width 0.1s linear;
transition: right 0.1s linear, width 0.1s linear;
}
/* Webkit Fix */
.scroller-content::-webkit-scrollbar,
.scroller-content::-webkit-scrollbar-button,
.scroller-content::-webkit-scrollbar-track,
.scroller-content::-webkit-scrollbar-track-piece,
.scroller-content::-webkit-scrollbar-thumb,
.scroller-content::-webkit-scrollbar-corner,
.scroller-content::-webkit-resizer { background: transparent; opacity: 0; }
/* Active Scrollbar */
.scroller-active .scroller-content { padding: 20px; }
.scroller-active .scroller-bar { display: block; }
/* Setup Scrollbar - Should match 'active' styles for proper sizing */
.scroller-active .scroller-content { padding: 20px; }
.scroller-active .scroller-bar { display: block; }
/* Horizontal */
.scroller-horizontal .scroller-content { overflow: auto; overflow-x: auto; overflow-y: hidden; padding: 0 0 10px 0; }
.scroller-horizontal .scroller-bar { border-left: none; border-top: 1px solid #EEEEEE; bottom: 0; height: 20px; top: auto; width: 100%; }
.scroller-horizontal .scroller-handle { bottom: 5px; height: 10px; right: auto; top: auto; width: 20px; }