javascript滚动条之ScrollBar.js

ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便 详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js/*================================= * ScrollBar.js beta * Author:wuquanyao * Email:

ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便

详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js

1. /*=================================
2. * ScrollBar.js beta
3. * Author:wuquanyao
4. * Email:wqynqa@163.com
5. *=================================*/
6. var ScrollBar = {};
7. (function(ScrollBar){
8. var parent,root,track,bar,tx,ch,h,sh,rate;
9. ScrollBar.adapter = function(config)
10. {
11. init(config);
12. }
13. function init(config)
14. {
15. parent = document.querySelector(config['selector']);
16. root = parent.parentNode;
17. createBar();
18. mouseaction();
19. }
20. function createBar()
21. {
22. track = document.createElement('div');
23. track.setAttribute('class','scroll-track');
24. bar = document.createElement('div');
25. bar.setAttribute('class','scroll-bar');
26. track.appendChild(bar);
27. root.appendChild(track);
28. sh = root.scrollHeight;
29. ch = root.offsetHeight;
30. tx = root.offsetTop;
31. h = ch/sh*ch;
32. if(h<30){
33. bar.style.height = '30px';
34. h = 30;
35. }else{
36. bar.style.height = h+'px';
37. }
38. rate = (sh-ch)/(ch-h);
39. }
40. function mouseaction()
41. {
42. function eventparse(obj,type,func){
43. if(document.attachEvent){
44. var events = {
45. click:'onclick',
46. mouseover:'onmouseover',
47. mousemove:'onmousemove',
48. mouseout:'onmouseout',
49. mousedown:'onmousedown',
50. mouseup:'onmouseup',
51. wheel:'DOMMouseScroll'
52. };
53. obj.attachEvent(events[type],func);
54. }else{
55. var events = {
56. click:'click',
57. mouseover:'mouseover',
58. mousemove:'mousemove',
59. mouseout:'mouseout',
60. mousedown:'mousedown',
61. mouseup:'mouseup',
62. wheel:'DOMMouseScroll'
63. };
64. obj.addEventListener(events[type],func,false);
65. }
66. }
67. function init(){
68. var bool = false,v;
69. eventparse(bar,'mousedown',function(event){
70. bool = true;
71. });
72. eventparse(document,'mousemove',function(event){
73. if(bool){
74. if(event.clientY<=(tx+10)){
75. v = 0;
76. }else if(event.clientY>=(tx+ch-h)){
77. v = tx+ch-h;
78. }else{
79. v = event.clientY;
80. }
81. parent.style.transform = 'translate(0px,'+(-v*rate)+'px)';
82. bar.style.transform = 'translateY('+v+'px)';
83. }
84. });
85. eventparse(document,'mouseup',function(event){
86. bool = false;
87. });
88. // eventparse(track,'click',function(event){
89. // event.stopPropagation();
90. // bar.style.transition = 'all 0ms ease 0ms';
91. // if(event.clientY<(tx+h)){
92. // bar.style.transform = 'translate(0px,0px)';
93. // }else if(event.clientY>=(tx+ch-h)){
94. // bar.style.transform = 'translate(0px,'+(tx+ch-h)+'px)';
95. // }else{
96. // bar.style.transform = 'translate(0px,'+(event.clientY-h/2)+'px)';
97. // }
98. // parent.style.transform = 'translate(0px,'+((-event.clientY+tx)*rate)+'px)';
99. // });
100. var offset=0;
101. if (window.navigator.userAgent.indexOf("Firefox") >= 0) {
102. eventparse(parent,'wheel',wheelEvent);
103. }else{
104. parent.onmousewheel=parent.onmousewheel=wheelEvent;
105. }
106. function wheelEvent(e){
107. var transform,bO,wv = (e.detail/3*20) || (-(e.wheelDelta/120*20));
108. if((offset<(sh-ch) &&(offset>=0))){
109. transform = 'translate(0px,'+(-offset)+'px)';
110. bO = 'translateY('+(offset/rate)+'px)';
111. offset = ((offset+wv)>(sh-ch))?offset:( ((offset+wv)<=0)?0:(offset+wv) );
112. }
113. bar.style.transform = bO;
114. parent.style.transform = transform;
115. }
116. }
117. init();
118. }
119. })(ScrollBar);