好资源导航 » 文章资讯 » 原生JS实现自定义滚动条效果

原生JS实现自定义滚动条效果

2024-01-25 10:10:03 53

本文实例为大家分享了JS实现自定义滚动条的具体代码，供大家参考，具体内容如下

实现思路：

1.外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度)，在高的div里面设置5个div，每个div的高度，都和父级的高度相同
2.在外层div的右侧边框以里自定义一个滚动条，（本人用div设置样式作为滚动条）
3.最外层的div添加onmousewheel事件，使用e.wheelDelta来获取每次滑动的距离，若为正数则向上滑动，将每次增加的数，赋给滚动条的top值，若为负数则向下互动，将每次减少的值，赋值给滚动条的top值，并对特别高的div作对应的上下平移处理
4.注意：滚动条的高度需要和高的div的高度成比例滑动





自定义滚轮事件

*{
padding:0;
margin:0;
}
#wrap{
height:500px;
width:300px;
position:relative;
/*超出隐藏*/
overflow:hidden;
margin:200pxauto0;
border:3pxsolidblack;
}
#content{
width:300px;
/*不需要设置高度，可被图片撑开*/
position:absolute;
left:0;
top:0;
border:1pxsolidred;
}
#content>div{
width:294px;
/*去除图片间的间隙*/
vertical-align:top;
height:500px;
border:1pxsolidred;
text-align:center;
font-size:100px;
line-height:500px;
}
#sliderWrap{
height:100%;
width:16px;
background-color:greenyellow;
position:absolute;
right:0;
top:0;
}
#slider{
width:10px;
height:50px;
background-color:blue;
position:absolute;
left:3px;
top:0px;
border-radius:10px;
}





1
2
3
4
5

varwrapDiv=document.getElementById("wrap"); varcontentDiv=document.getElementById("content"); varsliderWrap=document.getElementById("sliderWrap"); varslider=document.getElementById("slider"); //设置比例 //clientHeight-不包括border varscale=wrapDiv.clientHeight/contentDiv.clientHeight; //设置滑块的高度 varh1=sliderWrap.clientHeight*scale; //为了合理设置高度，设置滑块的最小高度 if(h1<50){ h1=50; }elseif(scale>=1){ //说明当前内容能过完全显示在可视区域内，不需要滚动条 sliderWrap.style.display="none"; } //设置滑块的高度 slider.style.height=h1+"px"; //设置y轴的增量 vary=0; //为wrap添加滚轮事件 wrapDiv.onmousewheel=function(e){ varevent1=event||e if(event.wheelDelta<0){ //滑动条向下滚动 y+=10; }elseif(event.wheelDelta>0){ //滑动条向上滚动 y-=10; } //y变化时说明在滚动，此时使滚动条发生滚动，以及设置content内容部分滚动 //判断极端情况，滑块不能划出屏幕 if(y<=0){ //滑块最多滑到顶部 y=0; } if(y>=sliderWrap.clientHeight-slider.clientHeight){ //滑块最多滑到最底部 y=sliderWrap.clientHeight-slider.clientHeight; } //更新滑块的位置 slider.style.top=y+"px"; scale=wrapDiv.clientHeight/contentDiv.clientHeight; contentDiv.style.top=-y/scale+"px"; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

原生JS实现自定义滚动条效果

热门推荐

随机推荐