├── Demo.html
├── README.md
├── scroll.js
└── scroll.min.js
/Demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
99 |
100 |
101 |
127 |
128 |
154 |
155 |
181 |
182 |
183 |
213 |
214 |
215 |
216 |
217 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # scroll
2 | 给PC浏览器使用的模拟滚动条 兼容到ie6 可以设置不同的样式来个性化定制滚动条,让你的滚动条更加酷炫 不依赖任何库 只有2kb
3 |
4 | [Demo](http://1.veritical.sinaapp.com/Demo.html)
5 | 说明文档正在建设中!
6 |
7 |
--------------------------------------------------------------------------------
/scroll.js:
--------------------------------------------------------------------------------
1 |
2 | function Scroll(options) {
3 | var cssCore = function(testCss) {
4 | switch (true) {
5 | case testCss.webkitTransition === '':
6 | return 'webkit'; break;
7 | case testCss.MozTransition === '':
8 | return 'Moz'; break;
9 | case testCss.msTransition === '':
10 | return 'ms'; break;
11 | case testCss.OTransition === '':
12 | return 'O'; break;
13 | default:
14 | return '';
15 | }
16 | }(document.createElement('ComicView').style),
17 | translate = function() {
18 | if (cssCore !== '') {
19 | return function(o, x, y) {
20 | o[cssCore + 'Transform'] = 'translate(' + x +'px,' + y + 'px) translateZ(0)';
21 | }
22 | } else {
23 | return function(o, x, y) {
24 | o.left = x + 'px';
25 | o.top = y + 'px';
26 | }
27 | }
28 | }(),
29 | addClass = function(o, cls) {
30 | var oN = o.className;
31 |
32 | if (oN.indexOf(cls) === -1) {
33 | o.className = oN + ' ' + cls;
34 | }
35 | },
36 | removeClass = function(o, cls) {
37 | var oN = o.className,
38 | arrName,
39 | arrNow;
40 |
41 | if (oN.indexOf(cls) === -1) return;
42 | arrName = oN.split(' ');
43 | arrNow = arrName.length;
44 | while (arrNow--) {
45 | if (arrName[arrNow] === cls) {
46 | arrName.splice(arrNow, 1);
47 | }
48 | }
49 | o.className = arrName.join(' ');
50 | },
51 | $$ = function(s) {
52 | return document.getElementById(s);
53 | };
54 |
55 | var c = $$(options.contain),
56 | w = $$(options.wrap),
57 | sb = $$(options.scrollBg),
58 | sk = $$(options.scrollBlock),
59 | fd = options.factHeightDiff || 0,
60 | fh = options.scrollBarHeightDiff || 0,
61 | fx = options.heightFix || 0,
62 | H = c.offsetHeight,
63 | cs = c.style,
64 | bs = sk.style,
65 | ws = w.style,
66 | gs = sb.style,
67 | isValidDrag = false,
68 | start = {},
69 | delta = {},
70 | nowTop = 0,
71 | o = w,
72 | max, h, S, s, _top, _thisScroll;
73 |
74 | cs.position = 'absolute';
75 | while (o.tagName.toUpperCase() !== 'BODY') {
76 | _thisScroll = o.getAttribute('data-scroll');
77 | if (_thisScroll) {
78 | scrollArr.push(_thisScroll);
79 | break;
80 | } else {
81 | o = o.parentNode;
82 | }
83 | }
84 |
85 | function pull() {
86 | if (_top < 0) {
87 | _top = 0
88 | } else if (_top > max) {
89 | _top = max;
90 | }
91 | try {
92 | bs.top = _top + 'px';
93 | translate(cs, 0, (_top / max * (h - H)) >> 0);
94 | } catch(e) {
95 |
96 | }
97 | }
98 |
99 | sk.onmousedown = function(e) {
100 | isValidDrag = true;
101 | body.onmousemove = goScroll;
102 | addClass(sb, 'scroll-scrolling');
103 | removeClass(c, 'moved');
104 | e = e || window.event;
105 | start = {
106 | X: e.clientX,
107 | Y: e.clientY,
108 | time: +new Date
109 | }
110 | delta = {};
111 | }
112 | sb.onmousedown = function(e) {
113 | e = e || window.event;
114 | if ( (e.target || e.srcElement) === sk) return;
115 | _top = e.offsetY < nowTop ? nowTop - (s * .7) >> 0
116 | : nowTop + (s * .7) >> 0;
117 | pull();
118 | nowTop = _top;
119 | }
120 |
121 | return {
122 | init: function(width, height) {
123 | H = c.offsetHeight || H;
124 | h = fx ? fx : height - fd;
125 | h = H - 1 < h ? H : h;
126 | S = h - fh;
127 | s = h / H * S;
128 | s = s > S ? S + 1 : s;
129 | ws.width = c.offsetWidth + 'px';
130 | ws.height = h + 'px';
131 | try {
132 | gs.height = S + 'px';
133 | bs.height = s + 'px';
134 | } catch(e) {
135 |
136 | }
137 | if (H === h) {
138 | gs.display = 'none';
139 | } else {
140 | gs.display = 'block';
141 | }
142 | max = ~~(S - s + 1);
143 | setTimeout(function() {
144 | pull();
145 | }, 0);
146 | },
147 | set: function(p) {
148 | _top = ((S - s) * p);
149 | pull();
150 | nowTop = _top;
151 | },
152 | reStart: function() {
153 | isValidDrag = false;
154 | removeClass(sb, 'scroll-scrolling');
155 | addClass(c, 'moved');
156 | if (!delta.Y) return;
157 | nowTop = _top;
158 | },
159 | isValid: function() {
160 | return isValidDrag;
161 | },
162 | nowTop: function() {
163 | return nowTop;
164 | },
165 | runScroll: function(e) {
166 | _t = this;
167 | delta = {
168 | X: e.clientX - start.X,
169 | Y: e.clientY - start.Y
170 | }
171 | _top = nowTop + delta.Y;
172 | pull();
173 | },
174 | wheelMove: function(dir) {
175 | _top = nowTop + ~~(s * .1) * dir;
176 | pull();
177 | nowTop = _top;
178 | }
179 | }
180 | }
181 | var body = document.body,
182 | scrollArr = [],
183 | goScroll = function(e) {
184 | var len = scrollArr.length,
185 | o;
186 | e = e || window.event;
187 | if (e.preventDefault) {
188 | e.preventDefault();
189 | } else {
190 | e.returnValue = false;
191 | }
192 | while (len--) {
193 | o = new Function('return ' + scrollArr[len])();
194 | if (o.isValid()) {
195 | o.runScroll(e);
196 | }
197 | }
198 | },
199 | wheelScroll = function(e) {
200 | var isFromScroll = false,
201 | direct,
202 | thisScroll,
203 | o;
204 | e = e || window.event;
205 | o = e.target || e.srcElement;
206 |
207 | while (o.tagName.toUpperCase() !== 'BODY') {
208 | thisScroll = o.getAttribute('data-scroll');
209 | if (thisScroll) {
210 | isFromScroll = true;
211 | break;
212 | } else {
213 | o = o.parentNode;
214 | }
215 | }
216 | if (!isFromScroll) return;
217 |
218 | if (e.preventDefault) {
219 | e.preventDefault();
220 | } else {
221 | e.returnValue = false;
222 | }
223 | direct = - e.wheelDelta || e.detail;
224 | direct = direct < 0 ? -1 : 1;
225 | (new Function("return " + thisScroll)()).wheelMove(direct);
226 | },
227 | _t;
228 |
229 | body.onmouseup = function() {
230 | body.onmousemove = null;
231 | if (_t) {
232 | _t.reStart();
233 | }
234 | }
235 |
236 | if (window.addEventListener) {
237 | document.addEventListener('DOMMouseScroll', wheelScroll, false);
238 | }
239 | window.onmousewheel = document.onmousewheel = wheelScroll;
--------------------------------------------------------------------------------
/scroll.min.js:
--------------------------------------------------------------------------------
1 | eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 1s(a){2 c(){0>b?b=0:b>q&&(b=q);U{w.S=b+"4",k(x,0,b/q*(g-l)>>0)}1o(m){}}6 h=2(m){26(!0){M""===m.21:3"20";M""===m.1Z:3"1Y";M""===m.1X:3"1W";M""===m.1U:3"O";1S:3""}}(5.1R("1Q").9),k=2(){3""!==h?2(m,a,d){m[h+"1K"]="1G("+a+"4,"+d+"4) 1E(0)"}:2(a,b,d){a.1D=b+"4";a.S=d+"4"}}(),y=2(a,b){6 d=a.N;-1===d.1a(b)&&(a.N=d+" "+b)},z=2(a,b){6 d=a.N,c;P(-1!==d.1a(b)){d=d.1C(" ");H(c=d.1f;c--;)d[c]===b&&d.1B(c,1);a.N=d.1A(" ")}},p=5.K(a.1z),r=5.K(a.1y),s=5.K(a.1x),u=5.K(a.1w),F=a.1v||0,G=a.1u||0,A=a.1t||0,l=p.1p,x=p.9,w=u.9,B=r.9,C=s.9,v=!1,D,E,t={},e=0;a=r;6 q,g,n,f,b;H(x.1r="1N";"1i"!==a.1j.1k();)P(r=a.1l("1m-o")){j.1q(r);1h}1g a=a.16;u.15=2(a){v=!0;i.12=11;y(s,"o-10");z(p,"W");a=a||8.I;D=a.1n;E=a.1d;t={}};s.15=2(a){a=a||8.I;(a.14||a.13)!==u&&(b=a.1F>0:e+.7*f>>0,c(),e=b)};3{1H:2(a,b){l=p.1p||l;g=A?A:b-F;g=l-1n?n+1:f;B.1I=p.1J+"4";B.Q=g+"4";U{C.Q=n+"4",w.Q=f+"4"}1o(d){}C.1L=l===g?"1M":"28";q=~~(n-f+1);1O(2(){c()},0)},1P:2(a){b=(n-f)*a;c();e=b},T:2(){v=!1;z(s,"o-10");y(p,"W");t.Y&&(e=b)},1e:2(){3 v},1T:2(){3 e},1c:2(a){L=1V;t={X:a.1n-D,Y:a.1d-E};b=e+t.Y;c()},19:2(a){b=e+~~(.1*f)*a;c();e=b}}}6 i=5.i,j=[],11=2(a){6 c=j.1f,h;a=a||8.I;H(a.J?a.J():a.17=!1;c--;)h=(Z V("3 "+j[c]))(),h.1e()&&h.1c(a)},R=2(a){6 c=!1,h,k;a=a||8.I;H(k=a.14||a.13;"1i"!==k.1j.1k();)P(h=k.1l("1m-o")){c=!0;1h}1g k=k.16;c&&(a.J?a.J():a.17=!1,a=-a.22||a.23,a=0>a?-1:1,(Z V("3 "+h))().19(a))},L;i.24=2(){i.12=25;L&&L.T()};8.1b&&5.1b("27",R,!1);8.18=5.18=R;',62,133,'||function|return|px|document|var||window|style|||||||||body|scrollArr|||||scroll|||||||||||||||||||for|event|preventDefault|getElementById|_t|case|className||if|height|wheelScroll|top|reStart|try|Function|moved|||new|scrolling|goScroll|onmousemove|srcElement|target|onmousedown|parentNode|returnValue|onmousewheel|wheelMove|indexOf|addEventListener|runScroll|clientY|isValid|length|else|break|BODY|tagName|toUpperCase|getAttribute|data|clientX|catch|offsetHeight|push|position|Scroll|heightFix|scrollBarHeightDiff|factHeightDiff|scrollBlock|scrollBg|wrap|contain|join|splice|split|left|translateZ|offsetY|translate|init|width|offsetWidth|Transform|display|none|absolute|setTimeout|set|ComicView|createElement|default|nowTop|OTransition|this|ms|msTransition|Moz|MozTransition|webkit|webkitTransition|wheelDelta|detail|onmouseup|null|switch|DOMMouseScroll|block'.split('|'),0,{}))
--------------------------------------------------------------------------------