您的位置：首页 > Web前端 > JavaScript

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

2016-08-24 10:25 405 查看

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下载地址

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航