本文实例为大家分享了js实现自定义滚动条组件的具体代码，供大家参考，具体内容如下
功能需求：
1、按照数据结构创建菜单内容，显示在页面中；
2、点击菜单后，显示对应的下级菜单内容，如果整体内容溢出，则出现滚动条；
3、滚动条的高度要随着整体内容高度的改变而改变。
4、鼠标拖动滚动条，整体内容要随着向上滚动。
5、当鼠标滚动时，滚动条和整体内容也要相应滚动。
来看一下效果：
默认状态：
点击菜单，内容溢出后，出现滚动条；
鼠标拖动滚动条，整体内容随着向上滚动：
分析：
- 这个案例中包括折叠菜单和滚动条两个组件 ，所以可以分开来写，然后整合到一起。
- 折叠菜单中要考虑多级菜单出现的情况，使用递归来做，数据的结构一定要统一，方便对数据进行处理。
- 滚动条的创建中，有两个比例等式，一是滚动条的高度/外层div高度=外层div高度/整体内容高度；二是滚动条的位置/（外层div高度-滚动条高度）=内容的scrollTop/（整体内容的高度-外层div高度）
- 当点击折叠菜单后，需要相应地设置滚动条的高度。折叠菜单是在Menu.js文件中，滚动条的设置是在ScrollBar.js文件中，需要进行抛发、监听事件。
- 监听菜单鼠标滚动的事件，当鼠标滚动时，判断滚轮方向，设置滚动条和内容的 top 值，也需要用到事件的抛发和监听。
下面附上代码：
html结构，模拟数据，创建外层容器：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>scrollBar</title></head><body> <script type="module"> import Utils from './js/Utils.js'; import Menu from './js/Menu.js'; import ScrollBar from './js/ScrollBar.js'; var arr=[ {name:"A",category:[ {name:"奥迪",category:[ {name:"奥迪A3",href:""}, {name:"奥迪A4L",category:[ {name:"奥迪A4L-1",href:""} ]}, {name:"奥迪Q3",href:""}, {name:"奥迪Q5L",href:""}, {name:"奥迪Q2L",href:""}, {name:"奥迪Q7(进口)",href:""}, {name:"奥迪Q8（进口）",href:""}, {name:"奥迪Q7新能源",href:""}, ]}, {name:"阿尔法-罗密欧",category:[ {name:"Stelvio（进口）",href:""}, {name:"Giulia（进口）",href:""}, ]} ]}, {name:"B",category:[ {name:"奔驰",category:[ {name:"奔驰C级",href:""}, {name:"奔驰E级",href:""}, {name:"奔驰GLA级",href:""}, {name:"奔驰GLC级",href:""}, {name:"奔驰A级",href:""}, {name:"奔驰E级(进口)",href:""}, {name:"奔驰A级（进口）",href:""}, {name:"奔驰B级（进口）",href:""}, {name:"威霆",href:""}, {name:"奔驰V级",href:""}, ]}, {name:"宝马",category:[ {name:"宝马5系",href:""}, {name:"宝马1系",href:""}, {name:"宝马X1",href:""}, {name:"宝马X5（进口）",href:""}, {name:"宝马X6（进口）",href:""}, ]}, {name:"本田",category:[ {name:"竞瑞",href:""}, {name:"思域",href:""}, {name:"本田CR-V",href:""}, {name:"本田XR-V",href:""}, {name:"本田UR-V",href:""}, {name:"艾力绅",href:""}, {name:"享域",href:""}, {name:"INSPIRE",href:""}, {name:"凌派",href:""}, {name:"雅阁",href:""}, {name:"缤智",href:""}, ]}, {name:"别克",category:[ {name:"凯越",href:""}, {name:"英朗",href:""}, {name:"威朗",href:""}, {name:"阅朗",href:""}, {name:"君威",href:""}, {name:"君越",href:""}, {name:"昂科拉",href:""}, {name:"昂科威",href:""}, {name:"别克GL8",href:""}, {name:"别克GL6",href:""}, {name:"VELITE",href:""}, ]} ]} ] var container; init(); function init(){ createMenu(arr); createScrollBar(); } function createMenu(arr){ //创建菜单 let menu=new Menu(arr); //创建最外层容器 container=Utils.createE("div",{ width:"235px", height:"360px", border:"1px solid #ccc", position:"relative", overflow:"hidden" }) menu.appendTo(container); Utils.appendTo(container,"body") } function createScrollBar(){ //创建滚动条 let scrollBar=new ScrollBar(container); scrollBar.appendTo(container); } </script></body></html> |
Menu.js文件，根据数据创建折叠菜单内容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
import Utils from './Utils.js';export default class Menu{ static SET_BAR_HEIGHT="set_bar_height"; static MOUSE_WHEEL_EVENT="mouse_wheel_event"; constructor(_list){ this.elem=this.createElem(_list); } createElem(_list){ if(this.elem) return this.elem; //创建最外层ul容器 let ul=Utils.createE("ul",{ listStyle:"none", padding:"0px", margin:"0px", width:"235px", height:"360px", color:"#333", fontSize:"14px", userSelect: "none", position:"absolute" }); //创建li列表 this.createMenu(_list,ul); //ul监听点击事件 ul.addEventListener("click",e=>this.clickHandler(e)); //ul监听滚轮事件，火狐使用DOMMouseScroll，其它浏览器使用mousewheel ul.addEventListener("mousewheel",e=>this.mouseWheelHandler(e)); ul.addEventListener("DOMMouseScroll",e=>this.mouseWheelHandler(e)); return ul; } appendTo(parent){ Utils.appendTo(this.elem,parent); } //创建一级菜单 createMenu(_list,parent){ for(let i=0;i<_list.length;i++){ let li=Utils.createE("li",{ background:"#f5f5f5", borderTop:"1px solid #ddd", lineHeight:"32px", },{ data:1,//控制一级菜单不能点击折叠 }) let span=Utils.createE("span",{ marginLeft:"14px", fontSize:"18px" },{ textContent:_list[i].name }) Utils.appendTo(span,li); Utils.appendTo(li,parent); //创建子菜单,第三个参数控制子菜单是否显示 this.createSubMenu(_list[i].category,li,0); } } //创建子菜单 createSubMenu(_subList,_parent,_index){ //如果没有子菜单，则跳出 if(_subList.length===0) return; let subUl=Utils.createE("ul",{ listStyle:"none", background:"#fff", padding:"0px", margin:"0px", fontSize:"14px", display:_index===0? "block" : "none" }) for(let i=0;i<_subList.length;i++){ let subLi=Utils.createE("li",{ paddingLeft:"40px", position:"relative", cursor:"pointer" }) if(!_subList[i].category){ //如果当前菜单没有子菜单，则创建a标签，进行跳转 let subA=Utils.createE("a",{ color:"#333", textDecoration:"none", width:"100%", display:"inline-block" },{ textContent:_subList[i].name, href:_subList[i].href || "javascript:void(0)", target:_subList[i].href ? "_blank" : "_self" }) Utils.appendTo(subA,subLi); }else{ //如果当前菜单有子菜单，创建span标签 let subSpan=Utils.createE("span",{ position:"absolute", left:"20px", top:"8px", border: "1px solid #ccc", display: "inline-block", width: "10px", height: "10px", lineHeight:"8px" },{ textContent:_subList[i].category.length>0? "+" : "-" }) subLi.textContent=_subList[i].name; Utils.appendTo(subSpan,subLi); } Utils.appendTo(subLi,subUl); //如果当前菜单没有子菜单，则跳过下面的执行 if(!_subList[i].category) continue; //将当前菜单的子菜单作为参数，进行递归 this.createSubMenu(_subList[i].category,subLi,1); } Utils.appendTo(subUl,_parent); } clickHandler(e){ //如果当前点击的不是li标签或者span，直接跳出 if(e.target.nodeName!=="LI" && e.target.nodeName!=="SPAN") return; let targ; if(e.target.nodeName==="SPAN") targ=e.target.parentElement; else targ=e.target; //如果当前点击Li下面没有子菜单，直接跳出 if(targ.children.length<=1) return; //如果当前点击的是一级菜单，直接跳出 if(targ.data===1) return; //控制当前点击的Li下的ul显示隐藏 if(!targ.bool) targ.lastElementChild.style.display="block"; else targ.lastElementChild.style.display="none"; targ.bool=!targ.bool; //改变span标签的内容 this.changeSpan(targ); //抛发事件,改变滚动条的高度 var evt=new Event(Menu.SET_BAR_HEIGHT); document.dispatchEvent(evt) } changeSpan(elem){ if(elem.lastElementChild.style.display==="block"){ elem.firstElementChild.textContent="-"; }else{ elem.firstElementChild.textContent="+"; } } mouseWheelHandler(e){ //阻止事件冒泡 e.stopPropagation(); //火狐浏览器判断e.detail，e.detail<0时,表示滚轮往下，页面往上 let tag=e.detail,wheelDir; //其他浏览器判断e.deltaY，e.deltaY<0时，表示滚轮往下，页面往上 if(tag===0) tag=e.deltaY; if(tag>0){ //滚轮往下滚动，页面往上走 wheelDir="down"; }else{ wheelDir="up"; } //抛发事件，将滚轮方向传递过去 let evt=new Event(Menu.MOUSE_WHEEL_EVENT); evt.wheelDirection=wheelDir; this.elem.dispatchEvent(evt); }} |
ScrollBar.js文件，创建滚动条，对滚动条进行操作：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import Utils from './Utils.js';import Menu from './Menu.js';export default class ScrollBar { bar; conHeight; menuHeight; wheelSpeed=6; barTop=0; static SET_BAR_HEIGHT="set_bar_height"; constructor(parent) { this.container = parent; this.menuUl=this.container.firstElementChild; this.elem = this.createElem(); //侦听菜单的点击事件，动态改变滚动条的高度 document.addEventListener(ScrollBar.SET_BAR_HEIGHT,()=>this.setBarHeight()); //ul菜单侦听滚轮事件 this.menuUl.addEventListener(Menu.MOUSE_WHEEL_EVENT,e=>this.mouseWheelHandler(e)); } createElem() { if (this.elem) return this.elem; //创建滚动条的外层容器 let div = Utils.createE("div", { width: "8px", height: "100%", position: "absolute", right: "0px", top: "0px", }) this.createBar(div); return div; } appendTo(parent) { Utils.appendTo(this.elem,parent); } createBar(_parent) { if(this.bar) return this.bar; //创建滚动条 this.bar = Utils.createE("div", { width: "100%", position: "absolute", left: "0px", top: "0px", borderRadius: "10px", backgroundColor: "rgba(255,0,0,.5)" }) //设置滚动条hover状态的样式 this.bar.addEventListener("mouseenter",e=>this.setMouseStateHandler(e)); this.bar.addEventListener("mouseleave",e=>this.setMouseStateHandler(e)); //设置滚动条的高度 this.setBarHeight(); //侦听鼠标拖动事件 this.mouseHand = e => this.mouseHandler(e); this.bar.addEventListener("mousedown", this.mouseHand); Utils.appendTo(this.bar, _parent); } setBarHeight() { //外层父容器的高度 this.conHeight = this.container.clientHeight; //实际内容的高度 this.menuHeight = this.container.firstElementChild.scrollHeight; //如果实际内容的高度小于父容器的高度，滚动条隐藏 if (this.conHeight >= this.menuHeight) this.bar.style.display = "none"; else this.bar.style.display = "block"; //计算滚动条的高度 let h = Math.floor(this.conHeight / this.menuHeight * this.conHeight); this.bar.style.height = h + "px"; } setMouseStateHandler(e){ //设置滚动条hover状态的样式 if(e.type==="mouseenter"){ this.bar.style.backgroundColor="rgba(255,0,0,1)"; }else{ this.bar.style.backgroundColor="rgba(255,0,0,.5)"; } } mouseHandler(e) { switch (e.type) { case "mousedown": e.preventDefault(); this.y = e.offsetY; document.addEventListener("mousemove", this.mouseHand); document.addEventListener("mouseup", this.mouseHand); break; case "mousemove": //注意：getBoundingClientRect()返回的结果中，width height 都是包含border的 var rect = this.container.getBoundingClientRect(); this.barTop = e.clientY - rect.y - this.y; //滚动条移动 this.barMove(); break; case "mouseup": document.removeEventListener("mousemove", this.mouseHand); document.removeEventListener("mouseup", this.mouseHand); break; } } mouseWheelHandler(e){ //滚轮事件 if(e.wheelDirection==="down"){ //滚动往下，菜单内容往上 this.barTop+=this.wheelSpeed; }else{ this.barTop-=this.wheelSpeed; } //滚动条移动 this.barMove(); } barMove(){ if (this.barTop < 0) this.barTop = 0; if (this.barTop > this.conHeight - this.bar.offsetHeight) this.barTop = this.conHeight - this.bar.offsetHeight; this.bar.style.top = this.barTop + "px"; //菜单内容滚动 this.menuMove(); } menuMove(){ //计算内容的滚动高度 let menuTop=this.barTop/(this.conHeight-this.bar.offsetHeight)*(this.menuHeight-this.conHeight); this.menuUl.style.top=-menuTop+"px"; }} |
Utils.js文件，是一个工具包：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
export default class Utils{ static createE(elem,style,prep){ elem=document.createElement(elem); if(style) for(let prop in style) elem.style[prop]=style[prop]; if(prep) for(let prop in prep) elem[prop]=prep[prop]; return elem; } static appendTo(elem,parent){ if (parent.constructor === String) parent = document.querySelector(parent); parent.appendChild(elem); } static randomNum(min,max){ return Math.floor(Math.random*(max-min)+min); } static randomColor(alpha){ alpha=alpha||Math.random().toFixed(1); if(isNaN(alpha)) alpha=1; if(alpha>1) alpha=1; if(alpha<0) alpha=0; let col="rgba("; for(let i=0;i<3;i++){ col+=Utils.randomNum(0,256)+","; } col+=alpha+")"; return col; } static insertCss(select,styles){ if(document.styleSheets.length===0){ let styleS=Utils.createE("style"); Utils.appendTo(styleS,document.head); } let styleSheet=document.styleSheets[document.styleSheets.length-1]; let str=select+"{"; for(var prop in styles){ str+=prop.replace(/[A-Z]/g,function(item){ return "-"+item.toLocaleLowerCase(); })+":"+styles[prop]+";"; } str+="}" styleSheet.insertRule(str,styleSheet.cssRules.length); } static getIdElem(elem,obj){ if(elem.id) obj[elem.id]=elem; if(elem.children.length===0) return obj; for(let i=0;i<elem.children.length;i++){ Utils.getIdElem(elem.children[i],obj); } }} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/charissa2017/article/details/104098404
