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

原生js实现自定义滚动条

2023-07-06 13:23:05 78

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

1.HTML文件

div1是滚动条，div2是滚动小球，div3是文本区域容器，div4是文本区域。

CSS3教程

CSS3简介

CSS3边框

CSS3圆角

CSS3背景

CSS3渐变

CSS3文本效果

CSS3字体

CSS32D转换

CSS33D转换

CSS3过渡

CSS3动画

CSS3多列

CSS3用户界面

CSS3图片

CSS3按钮

CSS3分页

CSS3框大小

CSS3弹性盒子

CSS3多媒体查询

CSS3多媒体查询实例

2.css样式文件

通过容器溢出隐藏，文本区域的绝对定位，然后再交给js处理。

*{padding:0;margin:0;}
#div{top:200px;left:25%;width:50%;height:300px;position:absolute;
}
#div1{width:20px;height:300px;position:relative;
background:#CCCCCC;border-radius:28px;float:right;cursor:pointer;}
#div1#div2{left:-4px;width:28px;height:28px;border-radius:50%;background:red;
position:absolute;}

#div3{width:90%;height:300px;border:2pxsolid#CCCCCC;
position:relative;float:left;overflow:hidden;}
#div3#div4{top:0;left:0;width:100%;position:absolute;font-family:"微软雅黑";
font-size:19px;letter-spacing:1px;padding:3px6px;}

3.js脚本代码

window.onload=function(){
varallDiv=document.getElementById('div');
varoDiv=document.getElementById('div2');
varaDiv=document.getElementById('div1');
vartextDiv1=document.getElementById('div3');
vartextDiv2=document.getElementById('div4');

//进度条拖动，内容跟着运动事件
oDiv.onmousedown=function(ev){
varoEvent=ev||event;

vardisY=oEvent.clientY-oDiv.offsetTop;

if(oDiv.setCapture){
oDiv.onmousemove=mouseMove;
oDiv.onmouseup=mouseUp;

oDiv.setCapture();
}else{
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}

functionmouseMove(ev){
varoEvent=ev||event;
vart=oEvent.clientY-disY;
varbottomLine=aDiv.offsetHeight-oDiv.offsetHeight;


if(t<0){
t=0;
}elseif(t>bottomLine){
t=bottomLine;
}

varpercent=t/272;

oDiv.style.top=t+'px';
textDiv2.style.top=-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';

};

functionmouseUp(){
this.onmousemove=null;
this.onmouseup=null;

if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
};

returnfalse;
};

//点击进度条，开启定时器，小球做匀速运动到达后，清楚定时器
aDiv.onmousedown=function(ev){
varoEvent=ev||event;
vardivY=oEvent.clientY-allDiv.offsetTop;
vartimer=null;varspeed=10;


clearInterval(timer)
timer=setInterval(function(){
varpercent=oDiv.offsetTop/272;


if(oDiv.offsetTopdivY){
oDiv.style.top=oDiv.offsetTop-speed+'px';
textDiv2.style.top=-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';
}elseif(oDiv.offsetTop>260){
oDiv.offsetTop=272+'px';
clearInterval(timer);
}elseif(oDiv.offsetTop<10){
oDiv.offsetTop=0+'px';
clearInterval(timer);
}else{
clearInterval(timer);
}


},10);

}

}

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

返回顶部
514930285
czq8825@qq.com

原生js实现自定义滚动条

1.HTML文件

2.css样式文件

3.js脚本代码

热门推荐

随机推荐