javascript封装自定义滚动条方法，可自定义四个边框滚动条
还是根据我的个人习惯封装了一个方法 setScroll({ box :父盒子DOM对象, content : 内容盒子DOM对象, scrollall : 滚动条大盒子DOM对象, scroll : 滚动条DOM对象, direction: 垂直滚动条还是水平滚动条 }) 该方法传入一个object，前四个属性必选，最后一个可选，‘vertical’ || ‘’level" ,默认vertical. html结构 最大盒子>(内容盒子+（滚动条盒子>滚动条）) 样式自己编写即可。 下来是js源码
| 0 | var setScroll = function(obj){ |
| 1 | |
| 2 | //初始化参数 |
| 3 | var box = obj.box, |
| 4 | content = obj.content, |
| 5 | scrollall = obj.scrollall, |
| 6 | scroll = obj.scroll; |
| 7 | direction = obj.direction || 'vertical'; |
| 8 | |
| 9 | //全局变量记录 |
| 10 | var startPosition, |
| 11 | scrTop = 0, |
| 12 | currentTop = 0; |
| 13 | |
| 14 | //初始化配置参数 |
| 15 | var getwh,wh,dier,tl,page; |
| 16 | |
| 17 | if(direction == 'vertical'){ |
| 18 | getwh = 'offsetHeight'; |
| 19 | wh = 'height'; |
| 20 | dier = 'top'; |
| 21 | tl = 'offsetTop'; |
| 22 | page = 'pageY'; |
| 23 | }else{ |
| 24 | getwh = 'offsetWidth'; |
| 25 | wh = 'width'; |
| 26 | dier = 'left'; |
| 27 | tl = 'offsetLeft'; |
| 28 | page = 'pageX'; |
| 29 | } |
| 30 | |
| 31 | var boxHeight = box[getwh], |
| 32 | contentHeight = content[getwh]; |
| 33 | |
| 34 | |
| 35 | |
| 36 | //初始化样式 |
| 37 | |
| 38 | scroll.style[wh] = (boxHeight / contentHeight * boxHeight) + 'px'; |
| 39 | |
| 40 | |
| 41 | var mousein = function (event){ |
| 42 | |
| 43 | event = event || window.event; |
| 44 | |
| 45 | var scrTop = event[page] - box[tl] - startPosition; |
| 46 | |
| 47 | window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); |
| 48 | |
| 49 | scrTop = scrTop < 0 ? 0 : scrTop; |
| 50 | scrTop = scrTop > boxHeight - scroll[getwh] ? boxHeight - scroll[getwh] : scrTop; |
| 51 | |
| 52 | currentTop = -scrTop / boxHeight * contentHeight; |
| 53 | |
| 54 | scroll.style[dier] = scrTop + 'px'; |
| 55 | |
| 56 | content.style[dier] = currentTop + 'px'; |
| 57 | |
| 58 | } |
| 59 | |
| 60 | |
| 61 | //鼠标按下，开始拖动 |
| 62 | scroll.addEventListener('mousedown',function(event){ |
| 63 | |
| 64 | event = event || window.event; |
| 65 | |
| 66 | //记录当前鼠标点击位置距离父盒子顶部的距离 |
| 67 | startPosition = event.offsetY; |
| 68 | |
| 69 | document.addEventListener('mousemove',mousein); |
| 70 | |
| 71 | }) |
| 72 | |
| 73 | |
| 74 | document.addEventListener('mouseup',function(){ |
| 75 | |
| 76 | document.removeEventListener('mousemove',mousein,false); |
| 77 | |
| 78 | }) |
| 79 | |
| 80 | box.addEventListener('mousewheel',boxscroll); |
| 81 | |
| 82 | box.addEventListener('DOMMouseScroll',boxscroll,false); |
| 83 | |
| 84 | function boxscroll(event){ |
| 85 | |
| 86 | event = event || window.event; |
| 87 | |
| 88 | if(event.wheelDelta){ |
| 89 | |
| 90 | if(-event.wheelDelta / 120 > 0){ |
| 91 | |
| 92 | scrTop = scroll[tl] + -event.wheelDelta / 120 + 4; |
| 93 | |
| 94 | }else{ |
| 95 | |
| 96 | scrTop = scroll[tl] + -event.wheelDelta / 120 - 4; |
| 97 | |
| 98 | } |
| 99 | |
| 100 | }else{ |
| 101 | |
| 102 | if(event.detail / 3 > 0){ |
| 103 | |
| 104 | scrTop = scroll[tl] + event.detail / 3 + 4; |
| 105 | |
| 106 | }else{ |
| 107 | |
| 108 | scrTop = scroll[tl] + event.detail / 3 - 4; |
| 109 | |
| 110 | } |
| 111 | |
| 112 | } |
| 113 | |
| 114 | currentTop = -scrTop / boxHeight * contentHeight; |
| 115 | |
| 116 | scrTop = scrTop < 0 ? 0 : scrTop; |
| 117 | scrTop = scrTop > boxHeight - scroll[getwh] ? boxHeight - scroll[getwh] : scrTop; |
| 118 | |
| 119 | currentTop = currentTop > 0 ? 0 : currentTop; |
| 120 | currentTop = currentTop < -(contentHeight - boxHeight) ? -(contentHeight - boxHeight) : currentTop; |
| 121 | |
| 122 | |
| 123 | scroll.style[dier] = scrTop + 'px'; |
| 124 | |
| 125 | content.style[dier] = currentTop + 'px'; |
| 126 | event.preventDefault(); |
| 127 | }}; |
在线运行地址可以查看源码分析 scrollJS下载地址
- 上一篇 »PHP生成HTML的技术原理
- 下一篇 »python-自定义一个序列