  1 /*node 为需要滚动展示的控件ID 控件会根据其父容器自动设定宽度 不支持resize只能初始化一次 */
  2 GLOBAL.Component.TinyVScrollBar = function (nodeID) {
  3     this._nodeID = nodeID;
  4     this._wrapList = GLOBAL.Dom.get(this._nodeID);
  5     if (typeof (this._wrapList) == 'undefined')
  6         return;
  7     this._wrapBox = this._wrapList.parentNode;
  8     this._scrollBox = null;
  9     this._scrollBar = null;
 10     this._scrollBoxID = this._nodeID + "scrollBox";
 11     this._scrollBarID = this._nodeID + "scrollBar";
 12     this._scale = 0;
 13     this._height = 0;
 14     this._maxTop = 0;
 15     this._ListMaxTop = 0;
 16     this._top = 0;
 17     /*供事件所用*/
 18     this._disY = 0;
 19     this._EventMap = {};
 20     this._bNegNumber = 0;
 21     this._ddisY = 0;
 22     /*初始化显示*/
 23     if(this.init() == 0)
 24     {
 25        return;
 26     }
 27     /*初始化移动高度*/
 28     this.initScale();
 29     /*绑定事件*/
 30     this.bindEvent();
 31 }
 32 
 33 
 34 GLOBAL.Component.TinyVScrollBar.prototype.init = function () {
 35     /*创建div*/
 36     this._scrollBox = document.createElement("div");
 37     this._scrollBox.id = this._scrollBoxID;
 38     this._scrollBox.className = "js-scrollbox";
 39     this._scrollBox.style.height = this._wrapBox.style.height;
 40     this._scrollBar = document.createElement("div");
 41     this._scrollBar.id = this._scrollBarID;
 42     this._scrollBar.className = "js-scrollbar";
 43     this._scrollBox.appendChild(this._scrollBar);
 44     this._wrapBox.appendChild(this._scrollBox);
 45     /*设定宽度 及位置 */
 46     /*父容器position必须为absolute 或者为 relative*/
 47     GLOBAL.Dom.setStyle(this._wrapBox, { 'overflow': 'hidden' });
 48     /*设置wraplist的位置和宽度*/
 49     var v_listWidth = this._wrapBox.clientWidth - 15;
 50     GLOBAL.Dom.setStyle(this._wrapList, { 'position': 'absolute', 'top': '0px', 'left': '0px', 'width': v_listWidth + 'px' });
 51     GLOBAL.Dom.setAttribute(this._wrapBox, { 'tabIndex': 0 });
 52     /*设置scrollbox*/
 53     GLOBAL.Dom.setStyle(this._scrollBox, { 'position': 'absolute', 'top': '0px', 'left': v_listWidth + 'px' });
 54     if (GLOBAL.TOOL.getNodeClientSize(this._wrapList).h <= GLOBAL.TOOL.getNodeClientSize(this._wrapBox).h)
 55     { 
 56       GLOBAL.Dom.setStyle(this._scrollBox, { 'display': 'none'});
 57       GLOBAL.Dom.setStyle(this._wrapList, {'width': this._wrapBox.clientWidth + 'px' });
 58       return 0;
 59     }
 60     return 1;
 61 }
 62 
 63 GLOBAL.Component.TinyVScrollBar.prototype.updateScroll = function () {
 64     this.clearAll();
 65     this._wrapList = GLOBAL.Dom.get(this._nodeID);
 66     if (typeof (this._wrapList) == 'undefined')
 67         return;
 68     this._wrapBox = this._wrapList.parentNode;
 69     if (GLOBAL.TOOL.getNodeSize(this._wrapList).h <= GLOBAL.TOOL.getNodeSize(this._wrapBox).h)
 70         return;
 71     this._top = 0;
 72     this.init();
 73     /*初始化移动高度*/
 74     this.initScale();
 75     this.bindEvent();
 76 
 77 }
 78 
 79 
 80 GLOBAL.Component.TinyVScrollBar.prototype.clearAll = function () {
 81     this.clearEvent();
 82     var node = GLOBAL.Dom.get(this._scrollBarID);
 83     if (node)
 84         node.parentNode.removeChild(node);
 85     node = GLOBAL.Dom.get(this._scrollBoxID);
 86     if (node)
 87         node.parentNode.removeChild(node);
 88 }
 89 
 90 GLOBAL.Component.TinyVScrollBar.prototype.clearEvent = function () {
 91     if (this._EventMap != null) {
 92         var key, comArray, tmp;
 93         for (key in this._EventMap) {
 94             comArray = key.split('$');
 95             if (this._EventMap[key] == null)
 96                 continue;
 97             if (comArray.length >= 2) {
 98                 tmp = comArray[0];
 99                 if (tmp.indexOf('_') >= 0) {
100                     eval('GLOBAL.Event.remove(this.' + GLOBAL.TOOL.trim(comArray[0]) + ',"' + GLOBAL.TOOL.trim(comArray[1]) + '",this._EventMap["' + key + '"]);');
101                 } else {
102                     eval('GLOBAL.Event.remove(' + GLOBAL.TOOL.trim(comArray[0]) + ',"' + GLOBAL.TOOL.trim(comArray[1]) + '",this._EventMap["' + key + '"]);');
103                 }
104             }
105         }
106     }
107 };
108 
109 GLOBAL.Component.TinyVScrollBar.prototype.initScale = function () {
110     this._scale = this._wrapBox.clientHeight / this._wrapList.scrollHeight;
111     this._height = this._scale * this._scrollBox.clientHeight;
112     this._maxTop = this._scrollBox.clientHeight - this._height;
113     this._ListMaxTop = this._wrapBox.clientHeight - this._wrapList.scrollHeight;
114     this._scrollBar.style.height = this._height + 'px';
115 }
116 GLOBAL.Component.TinyVScrollBar.prototype.fnScroll = function () {
117     if (this._top < 0) this._top = 0;
118     if (this._top > this._maxTop) this._top = this._maxTop;
119     var scale = this._top / this._maxTop;
120     var listTop = scale * this._ListMaxTop;
121     this._scrollBar.style.top = this._top + 'px';
122     this._wrapList.style.top = listTop + 'px';
123 }
124 GLOBAL.Component.TinyVScrollBar.prototype.bindEvent = function () {
125     /*绑定滑轮事件*/
126     this._EventMap._wrapList$mousewheel = GLOBAL.Event.on(this._wrapBox, 'mousewheel', this.mousewheel, this);
127     this._EventMap._wrapList$DOMMouseScroll = GLOBAL.Event.on(this._wrapBox, 'DOMMouseScroll', this.mousewheel, this);
128     /*单击事件*/
129     this._EventMap._scrollBox$click = GLOBAL.Event.on(this._scrollBox, 'click', this.mouseclick, this);
130     this._EventMap._scrollBar$click = GLOBAL.Event.on(this._scrollBar, 'click', this.mousecancelclick, this);
131     /*单击拖动事件*/
132     this._EventMap._scrollBar$mousedown = GLOBAL.Event.on(this._scrollBar, 'mousedown', this.mousemoveanddown, this);
133     /*鼠标双击事件*/
134     this._EventMap._scrollBar$dblclick = GLOBAL.Event.on(this._scrollBar, 'dblclick', this.mousedbclick, this);
135     /*键盘事件*/
136     this._EventMap._wrapBox$keydown = GLOBAL.Event.on(this._wrapBox, 'keydown', this.keyDown, this);
137     /*选择事件*/
138     this._EventMap._wrapList$mousedown = GLOBAL.Event.on(this._wrapBox, 'mousedown', this.mousedown, this);
139 }
140 /*定义的事件*/
141 /*鼠标滑轮*/
142 GLOBAL.Component.TinyVScrollBar.prototype.mousewheel = function (ev) {
143     ev = ev || event;
144     var fx = ev.wheelDelta || ev.detail;
145     var bDown = true;
146     if (ev.detail) {
147         bDown = fx > 0 ? true : false;
148     } else {
149         bDown = fx > 0 ? false : true;
150     }
151     if (bDown) {
152         this._top += 10;
153     } else {
154         this._top -= 10;
155     }
156     this.fnScroll();
157     GLOBAL.Event.stopPropagation(ev);
158 };
159 /*单击事件*/
160 GLOBAL.Component.TinyVScrollBar.prototype.mouseclick = function (ev) {
161     ev = ev || event;
162     var position = GLOBAL.TOOL.getWindowPosition(this._scrollBox);
163     var disY = ev.clientY - position.y;
164     this._top = disY - GLOBAL.TOOL.parsePx(this._scrollBar.style.height) / 2;
165     this.fnScroll();
166     GLOBAL.Event.stopPropagation(ev);
167 };
168 GLOBAL.Component.TinyVScrollBar.prototype.mousecancelclick = function (ev) {
169     ev = ev || event;
170     GLOBAL.Event.stopPropagation(ev);
171 };
172 
173 /*单击拖动事件*/
174 GLOBAL.Component.TinyVScrollBar.prototype.mousemoveanddown = function (ev) {
175     ev = ev || event;
176     //console.debug("mousemoveanddown");
177     //var position = GLOBAL.TOOL.getWindowPosition(this._scrollBox);
178     this._disY = ev.clientY;
179     //console.debug("a"+this._disY);
180     this._EventMap.document$mousemove = GLOBAL.Event.on(document, 'mousemove', this.documentmousemove, this);
181     this._EventMap.document$mouseup = GLOBAL.Event.on(document, 'mouseup', this.documentmousemovecancel, this);
182     GLOBAL.Event.stopPropagation(ev);
183 };
184 GLOBAL.Component.TinyVScrollBar.prototype.documentmousemove = function (ev) {
185     ev = ev || event;
186     //console.debug("b"+ev.clientY);
187     var topY = ev.clientY - this._disY;
188     this._disY = ev.clientY;
189     this._top += topY;
190     this.fnScroll();
191     GLOBAL.Event.stopPropagation(ev);
192 };
193 GLOBAL.Component.TinyVScrollBar.prototype.documentmousemovecancel = function (ev) {
194     ev = ev || event;
195     if (this._EventMap.document$mousemove) {
196         GLOBAL.Event.remove(document, 'mousemove', this._EventMap.document$mousemove);
197     }
198     if (this._EventMap.document$mouseup) {
199         GLOBAL.Event.remove(document, 'mouseup', this._EventMap.document$mouseup);
200     }
201     GLOBAL.Event.stopPropagation(ev);
202 };
203 /*鼠标双击事件*/
204 GLOBAL.Component.TinyVScrollBar.prototype.mousedbclick = function (ev) {
205 
206     ev = ev || event;
207     if (this._bNegNumber == 0) {
208         this._top += 10;
209         if (this._top < 0) this._top = 0;
210         if (this._top >= this._maxTop) {
211             this._top = this._maxTop;
212             this._bNegNumber = 1;
213         }
214     }
215     else {
216         this._top -= 10;
217         if (this._top <= 0) {
218             this._top = 0;
219             this._bNegNumber = 0;
220         }
221         if (this._top >= this._maxTop) {
222             this._top = this._maxTop;
223         }
224     }
225     this.fnScroll();
226     GLOBAL.Event.stopPropagation(ev);
227 };
228 /*键盘事件*/
229 GLOBAL.Component.TinyVScrollBar.prototype.keyDown = function (e) {
230     e = GLOBAL.Event.getEvent(e);
231     var currKey = e.keyCode || e.which || e.charCode;
232     switch (currKey) {
233         case 38: //向上
234             this._top -= 10;
235             if (this._top < 0) this._top = 0;
236             break;
237         case 40: //向下
238             this._top += 10;
239             if (this._top > this._maxTop) this._top = this._maxTop;
240             break;
241         default:
242     }
243     this.fnScroll();
244     GLOBAL.Event.stopPropagation(e);
245 }
246 GLOBAL.Component.TinyVScrollBar.prototype.mouseup = function (ev) {
247     if (this._EventMap.document$mousemove$wraplist) {
248         GLOBAL.Event.remove(document, 'mousemove', this._EventMap.document$mousemove$wraplist);
249     }
250     if (this._EventMap.document$mouseup$wraplist) {
251         GLOBAL.Event.remove(document, 'mouseup', this._EventMap.document$mouseup$wraplist);
252     }
253     GLOBAL.Event.stopPropagation(ev);
254 }
255 
256 GLOBAL.Component.TinyVScrollBar.prototype.mousedown = function (ev) {
257     ev = ev || event;
258     this._ddisY = ev.clientY;
259     this._EventMap.document$mousemove$wraplist = GLOBAL.Event.on(document, 'mousemove', this.wraplistdocumentmousemove, this);
260     this._EventMap.document$mouseup$wraplist = GLOBAL.Event.on(document, 'mouseup', this.mouseup, this);
261     GLOBAL.Event.stopPropagation(ev);
262 }
263 
264 GLOBAL.Component.TinyVScrollBar.prototype.wraplistdocumentmousemove = function (ev) {
265     ev = ev || event;
266     //console.debug("b"+ev.clientY);
267     var position = GLOBAL.TOOL.getWindowPosition(this._wrapBox);
268     if (ev.clientY > position.y && ev.clientY < (position.y + this._wrapBox.clientHeight)) {
269         GLOBAL.Event.stopPropagation(ev);
270         return;
271     }
272     var topY = ev.clientY - this._ddisY;
273     if (topY == 0) {
274         GLOBAL.Event.stopPropagation(ev);
275         return;
276     }
277     if (topY < 0) {
278         this._ddisY = ev.clientY;
279         this._top -= 10;
280     }
281     else {
282         this._ddisY = ev.clientY;
283         this._top += 10;
284     }
285     this.fnScroll();
286     GLOBAL.Event.stopPropagation(ev);
287 }

所使用的css

 1 .js-scrollbar:hover{
 2   border: 0.5px #0036ff solid ;
 3   background-color: #494949;
 4   box-shadow: inset 0 0.5px rgba(255,255,255,0.36),0 0 0 1px #6fb5f1;
 5   cursor:pointer;
 6 }
 7 
 8 
 9 .js-scrollbar{
10   position:relative;
11   width:13px;
12   height:20px;
13   margin-left:auto;
14   margin-right:auto;
15   background-color: #d9d9d9;
16   border-radius: 2px;
17 }
18 
19 .js-scrollbox{
20   width:15px;
21   border-radius: 2px;
22   background-color: #f3faff;
23 }

使用为获取要显示的div 的ID, 1 new GLOBAL.Component.TinyVScrollBar("#divID");

posted on 2014-10-14 18:08 细雨水上飘阅读(476) 评论(0) 收藏举报

刷新页面返回顶部

导航