javascript封装自定义滚动条方法，可自定义四个边框滚动条

来源：互联网发布：龙与地下城游戏知乎编辑：程序博客网时间：2024/06/05 04:54

http://www.cnblogs.com/webhb/p/5755762.html

还是根据我的个人习惯封装了一个方法 setScroll({ box :父盒子DOM对象, content : 内容盒子DOM对象, scrollall : 滚动条大盒子DOM对象, scroll : 滚动条DOM对象, direction: 垂直滚动条还是水平滚动条 }) 该方法传入一个object，前四个属性必选，最后一个可选，‘vertical’ || ‘’level” ,默认vertical. html结构最大盒子>(内容盒子+（滚动条盒子>滚动条）) 样式自己编写即可。下来是js源码

0var setScroll = function(obj){1 2//初始化参数3var 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 41var mousein = function (event){42 43event = event || window.event;44 45var scrTop = event[page] - box[tl] - startPosition;46 47window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 48 49scrTop = scrTop < 0 ? 0 : scrTop;50scrTop = scrTop > boxHeight - scroll[getwh] ? boxHeight - scroll[getwh] : scrTop;51 52currentTop = -scrTop / boxHeight * contentHeight;53 54scroll.style[dier] = scrTop + 'px';55 56content.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 69document.addEventListener('mousemove',mousein);70 71 })72 73 74document.addEventListener('mouseup',function(){75 76document.removeEventListener('mousemove',mousein,false);77 78})79 80box.addEventListener('mousewheel',boxscroll);81 82box.addEventListener('DOMMouseScroll',boxscroll,false); 83 84function boxscroll(event){85 86event = event || window.event;87 88if(event.wheelDelta){89 90if(-event.wheelDelta / 120 > 0){91 92scrTop = scroll[tl] + -event.wheelDelta / 120 + 4;93 94}else{95 96scrTop = scroll[tl] + -event.wheelDelta / 120 - 4;97 98}99 100}else{101 102if(event.detail / 3 > 0){103 104scrTop = scroll[tl] + event.detail / 3 + 4;105 106}else{107 108scrTop = scroll[tl] + event.detail / 3 - 4;109 110}111 112}113 114currentTop = -scrTop / boxHeight * contentHeight;115 116scrTop = scrTop < 0 ? 0 : scrTop;117scrTop = scrTop > boxHeight - scroll[getwh] ? boxHeight - scroll[getwh] : scrTop;118 119currentTop = currentTop > 0 ? 0 : currentTop;120currentTop = currentTop < -(contentHeight - boxHeight) ? -(contentHeight - boxHeight) : currentTop;121 122 123scroll.style[dier] = scrTop + 'px';124 125content.style[dier] = currentTop + 'px';126 event.preventDefault();127}};

在线运行地址可以查看源码分析 scrollJS下载地址

查看原文-摘自大公爵ddamy.com

阅读全文

0 0