码迷,mamicode.com
首页 > 其他好文 > 详细

div自定义的滚动条 (水平导航条)

时间:2016-06-29 18:34:21      阅读:1041      评论:0      收藏:0      [点我收藏+]

标签:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5     <style>
  6         div{
  7 /*            width:800px;*/
  8             height:200px;
  9             border:1px solid #ddd;
 10             overflow: hidden;
 11             /*white-space:nowrap; */
 12         }
 13         /*div::-webkit-scrollbar-track
 14         {
 15             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 16             border-radius: 10px;
 17             background-color: #F5F5F5;
 18         }
 19 
 20         div::-webkit-scrollbar
 21         {
 22             width: 12px;
 23             background-color: #F5F5F5;
 24             margin-bottom:100px;
 25         }
 26 
 27         div::-webkit-scrollbar-thumb
 28         {
 29             border-radius: 10px;
 30             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 31             background-color: #555;
 32         }*/
 33         .scrollBar {
 34             width: 30px !important;
 35             height:10px !important;
 36             background-color: #daa520;
 37             position: absolute;
 38             top: 200px;
 39             left: 0px;
 40             display: block;
 41             border-radius: 6px;
 42             z-index: 10;
 43         }
 44 
 45         .scrollBarHover {
 46             background-color: #b8860b;
 47         }
 48 
 49         .scrollBarActive {
 50             background-color: #ff8c00;
 51         }
 52 
 53         .scrollContent {
 54             width: 600px;
 55             height: 600px;
 56             border: 1px solid #808080;
 57             overflow: hidden;
 58             white-space: nowrap;
 59         }
 60         tr{
 61            
 62             height:30px;
 63         }
 64         td{
 65              width:200px;
 66             border:1px solid #ddd;
 67         }
 68         table{
 69             
 70             border-collapse: collapse;
 71             table-layout:fixed;
 72         }
 73     </style>
 74 </head>
 75 <body>
 76 <div id="text_div" class="scrollContent">
 77     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 78     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 79     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 80     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 81     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 82     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 83     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 84     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 85     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 86     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 87     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 88     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 89     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 90     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 91     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 92     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 93     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 94     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 95     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 96     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 97     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 98     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 99     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
100     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
101     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
102     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
103     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
104     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
105     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
106     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
107     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
108     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
109     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
110     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
111     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &larr;
113     <table>
114         <caption>table title and/or explanatory text</caption>
115         <thead>
116             <tr>
117                 <th>header</th>
118             </tr>
119         </thead>
120         <tbody>
121             <tr>
122                 <td>data Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
123                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
124                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
125                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
126                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
127                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
128             </tr><tr>
129                 <td>data</td>
130             </tr><tr>
131                 <td>data</td>
132             </tr><tr>
133                 <td>data</td>
134             </tr><tr>
135                 <td>data</td>
136             </tr><tr>
137                 <td>data</td>
138             </tr><tr>
139                 <td>data</td>
140             </tr><tr>
141                 <td>data</td>
142             </tr>
143         </tbody>
144     </table>
145 </div>
146 <script type="text/javascript">
147 
148 
149 function $(id) {
150     return document.getElementById(id);
151 }
152 
153 var ScrollBar = function(options) {
154     var defaults = {
155         barClass:scrollBar,
156         barHoverClass: scrollBarHover,
157         barActiveClass: scrollBarActive,
158         barContent: null
159     },
160             doc = document,
161             utils = {
162                 hide: function (obj) {
163                     obj.style.display = none;
164                 },
165                 show :function(obj) {
166                     obj.style.display = block;
167                 },
168                 isShow : function(c) {
169                     return c.style["display"] === "none" ? !1 : !0
170                 },
171                 hasClassName: function(element, className) {
172 
173                     var elementClassName = element.className;
174                     return (elementClassName.length > 0 && (elementClassName == className ||
175                             new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
176                 },
177                 addClassName: function(element, className) {
178 
179                     if (!utils.hasClassName(element, className))
180                         element.className += (element.className ?   : ‘‘) + className;
181                     return element;
182                 },
183 
184                 removeClassName: function(element, className) {
185 
186                     element.className = element.className.replace(
187                             new RegExp("(^|\\s+)" + className + "(\\s+|$)"),  );
188                     return element;
189                 },
190                 getCurrentStyle : function(el) {
191                     if (el.currentStyle) {
192                         return el.currentStyle;
193                     } else if (window.getComputedStyle) {
194                         return getComputedStyle(el, null);
195                     }
196                     return null;
197                 },
198                 extend :function() {
199                     var args = Array.prototype.slice.call(arguments);
200                     if (args.length == 1)
201                         args.unshift({});
202                     for (var name in args[1]) {
203                         if (args[1].hasOwnProperty(name)) {
204                             args[0][name] = args[1][name];
205                         }
206                     }
207                     return args[0];
208                 },
209                 bind: function(target, type, call) {
210                     if (target.addEventListener) {
211                         target.addEventListener(type, call, 0);
212                     } else if (target.attachEvent) {
213                         target.attachEvent(on + type, call);
214                     } else {
215                         target[on + type] = call;
216                     }
217                 },
218                 unbind: function(target, type) {
219                     if (target.removeEventListener) {
220                         target.removeEventListener(type);
221                     } else if (target.detachEvent) {
222                         target.detachEvent(on + type);
223                     } else {
224                         target[on + type] = null;
225                     }
226                 }
227             };
228 
229     options = utils.extend(defaults, options || {});
230 
231     utils.extend(this, {
232         utils : utils,
233         bar : doc.createElement(div),
234         content : options.barContent,
235         init: function() {
236             this.bar.className = options.barClass || scrollBar;
237             this.content = options.barContent;
238 
239             this.content.appendChild(this.bar);
240 
241             var el = doc.createElement(div),style = utils.getCurrentStyle(this.content);
242 
243             el.style.cssText = overflow: hidden; position: relative;padding:2px; width: + style.width + ; height:  + style.height + ;;
244             var contentParent = this.content.parentNode;
245 
246             el.appendChild(this.content);
247             el.appendChild(this.bar);
248             contentParent.appendChild(el);
249 
250             this.wheelThread = 20;
251             this.isScrolling = !1;
252             this.setBarHeight();
253             var self = this;
254             var events = {
255                 onMouseDown: function(e) {
256                     e = e || window.event;
257                     var target = e.currentTarget || e.srcElement;
258                     target.style.cursor = default;
259                     self.bar.x = e.clientX;
260                     self.bar.t = parseInt(self.bar.style.marginLeft);
261                     self.isScrolling = 1;
262 
263                     options.barActiveClass && utils.addClassName(self.bar, options.barActiveClass);
264                 },
265                 onMouseMove: function(e) {
266                     e = e || window.event;
267                     var isClickButton = (e.button === 1 || e.button === 0);
268                     if (self.isScrolling && isClickButton) {
269                         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
270                         self.scroll(e.clientX - self.bar.x);
271                         e.preventDefault && e.preventDefault();
272                         e.stopPropagation && e.stopPropagation();
273                     }
274                 },
275                 onMouseUp: function() {
276 
277                     if (self.isScrolling) {
278                         self.isScrolling = 0;
279                        
280                         options.barActiveClass && utils.removeClassName(self.bar, options.barActiveClass);
281                     }
282                 },
283                 onMouseOver: function() {
284                    
285                     options.barHoverClass && utils.addClassName(self.bar, options.barHoverClass)
286                 },
287                 onMouseOut: function() {
288                     utils.removeClassName(self.bar, options.barHoverClass)
289                 },
290                 onMouseWheel: function(e) {
291                     e = e || window.event;
292                     if (utils.isShow(self.bar)) {
293                         self.D = e.wheelDelta;
294                         e.returnValue = !1;
295                         var d = self.D < 0 ? self.wheelThread : 0 - self.wheelThread;
296                         self.bar.x = e.clientX;
297                         self.bar.t = parseInt(self.bar.style.marginLeft);
298                         self.scroll(d)
299                     } else{
300                         self.scrollToBottom(e)
301                     }
302                 },
303                 onClick: function(e) {
304                     e.stopPropagation && e.stopPropagation()
305                 },
306                 onDomMouseScroll: function(e) {
307                     if (utils.isShow(self.bar)) {
308                         self.D = e.detail > 0 ? -1 : 1;
309                         e.stopPropagation && e.stopPropagation();
310                         e.preventDefault && e.preventDefault();
311                         self.bar.x = e.clientX;
312                         self.bar.t = parseInt(self.bar.style.marginLeft);
313                         self.scroll(self.D < 0 ? self.wheelThread : 0 - self.wheelThread);
314 
315                     } else {
316                         self.scrollToBottom(e)
317                     }
318                 }
319             }
320 
321             utils.bind(this.bar, mousedown, events.onMouseDown);
322             utils.bind(doc, mousemove, events.onMouseMove);
323             utils.bind(this.bar, mouseout, events.onMouseOut);
324             utils.bind(this.bar, mouseover, events.onMouseOver);
325             utils.bind(doc, mouseup, events.onMouseUp);
326             utils.bind(this.content, mousewheel, events.onMouseWheel);
327             utils.bind(this.content, dommousescroll, events.onDomMouseScroll);
328 
329         },
330         onscroll : doc.onscroll || function() {
331         },
332         scrollToBottom : doc.scrollToBottom || function() {
333         },
334         scroll: function(b) {
335 
336             this.marginLeft = (this.bar.t || 0) + b;
337             if (this.marginLeft < 0)
338                 this.marginLeft = 0;
339             if (this.marginLeft > this.content.clientWidth - this.bar.clientWidth)
340                 this.marginLeft = this.content.clientWidth - this.bar.clientWidth,this.scrollToBottom();
341             this.bar.style.marginLeft = this.marginLeft + "px";
342             if (b == 0)
343                 this.onscroll(b, b);
344             var a = (this.content.scrollWidth -
345                     this.content.clientWidth) * parseInt(this.marginLeft) / (this.content.clientWidth - this.bar.clientWidth);
346 
347             this.content.scrollLeft = a;
348 
349             this.onscroll(a, b)
350         },
351         setBarHeight: function() {
352             this.onscroll(0, 0);
353             this.bar.style.width = "0";
354             this.utils.hide(this.bar);
355 
356             this.content.offsetWidth - this.content.scrollWidth >= 0 ? (this.bar.t = 0) : (this.bar.style.width = parseInt(this.content.offsetWidth / this.content.scrollWidth * this.content.offsetWidth) + "px",this.utils.show(this.bar),this.bar.t = parseInt(this.bar.style.marginLeft));
357             this.scroll(0);
358         }
359     });
360 
361 
362 }
363 
364 var scroll = new ScrollBar({
365     barContent: $(text_div)
366 });
367 scroll.init();
368 
369 </script>
370 </body>
371 </html>

 

div自定义的滚动条 (水平导航条)

标签:

原文地址:http://www.cnblogs.com/ws-zhangbo/p/5627719.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!