javascript封装自定义滚动条方法,可自定义四个边框滚动条
2023-09-27 14:29:03 时间
http://www.cnblogs.com/webhb/p/5755762.html
还是根据我的个人习惯封装了一个方法 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下载地址
相关文章
- 在jsp中嵌入javascript代码执行对html的影响方式
- JavaScript:封装单向链表10种常见的操作方法
- 圣诞节,把你的 JavaScript 代码都装扮成圣诞树吧
- Javascript url 小逻辑
- JavaScript之JS单线程|事件循环|事件队列|执行栈
- JavaScript统计数据处理(5)- 类的封装和继承
- writing a javascript module ready for ES6 import
- javascript 获取节点元素的封装
- javascript模块化编程 从入门到实战
- 在 Eclipse 中使用 JSHint 检查 JavaScript 代码
- JavaScript系列——数组元素左右移动N位算法实现
- Dynamics CRM Form表单中通过javascript抓取触发change事件字段的属性名
- Handsontable电子表格的 JavaScript 数据网格
- JavaScript公共组件父子依赖调用及子校验父条件问题解决
- JavaScript(JS) 面向对象(封装、继承、多态)
- JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]
- 使用 ES6 编写更好的 JavaScript Part II:深入探究 [类]
- javascript中Ajax的简单封装
- 五十行javascript代码实现简单的双向数据绑定
- JavaScript中遍历数组 最好不要使用 for in 遍历
- Javascript中事件库的封装
- JavaScript项目中封装的util常用工具
- JavaScript-笔试题之indexOf() forEach() map方法重写 #
- leetcode算法练习 JavaScript实现
- 107个常用Javascript语句