原生js实现自定义滚动条组件
(编辑：jimmy 日期: 2024/12/22 浏览：2)
本文实例为大家分享了js实现自定义滚动条组件的具体代码，供大家参考，具体内容如下
功能需求：
1、按照数据结构创建菜单内容，显示在页面中；
2、点击菜单后，显示对应的下级菜单内容，如果整体内容溢出，则出现滚动条；
3、滚动条的高度要随着整体内容高度的改变而改变。
4、鼠标拖动滚动条，整体内容要随着向上滚动。
5、当鼠标滚动时，滚动条和整体内容也要相应滚动。
来看一下效果：
默认状态：
点击菜单，内容溢出后，出现滚动条；
鼠标拖动滚动条，整体内容随着向上滚动：
分析：
- 这个案例中包括折叠菜单和滚动条两个组件 ，所以可以分开来写，然后整合到一起。
- 折叠菜单中要考虑多级菜单出现的情况，使用递归来做，数据的结构一定要统一，方便对数据进行处理。
- 滚动条的创建中，有两个比例等式，一是滚动条的高度/外层div高度=外层div高度/整体内容高度；二是滚动条的位置/（外层div高度-滚动条高度）=内容的scrollTop/（整体内容的高度-外层div高度）
- 当点击折叠菜单后，需要相应地设置滚动条的高度。折叠菜单是在Menu.js文件中，滚动条的设置是在ScrollBar.js文件中，需要进行抛发、监听事件。
- 监听菜单鼠标滚动的事件，当鼠标滚动时，判断滚轮方向，设置滚动条和内容的 top 值，也需要用到事件的抛发和监听。
下面附上代码：
html结构，模拟数据，创建外层容器：
<!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文件，根据数据创建折叠菜单内容：
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文件，创建滚动条，对滚动条进行操作：
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文件，是一个工具包：
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);
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：原生js实现下拉框选择组件
下一篇：原生js实现自定义滚动条