本文实例为大家分享了js实现自定义滚动条的具体代码，供大家参考，具体内容如下
1.HTML文件
div1是滚动条，div2是滚动小球，div3是文本区域容器，div4是文本区域。
< div id = "div" >
< div id = "div1" >
< div id = "div2" > </ div >
</ div >
< div id = "div3" >
< div id = "div4" >
< p >CSS3 教程</ p >
< p >CSS3 教程</ p >
< p >CSS3 简介</ p >
< p >CSS3 边框</ p >
< p >CSS3 圆角</ p >
< p >CSS3 背景</ p >
< p >CSS3 渐变</ p >
< p >CSS3 文本效果</ p >
< p >CSS3 字体</ p >
< p >CSS3 2D 转换</ p >
< p >CSS3 3D 转换</ p >
< p >CSS3 过渡</ p >
< p >CSS3 动画</ p >
< p >CSS3 多列</ p >
< p >CSS3 用户界面</ p >
< p >CSS3 图片</ p >
< p >CSS3 按钮</ p >
< p >CSS3 分页</ p >
< p >CSS3 框大小</ p >
< p >CSS3 弹性盒子</ p >
< p >CSS3 多媒体查询</ p >
< p >CSS3 多媒体查询实例</ p >
</ div >
</ div >
</ div >
2.css样式文件
通过容器溢出隐藏，文本区域的绝对定位，然后再交给js处理。
*{ padding : 0 ; margin : 0 ;}
#div{ top : 200px ; left : 25% ; width : 50% ; height : 300px ; position : absolute ;
}
#div 1 { width : 20px ; height : 300px ; position : relative ;
background : #CCCCCC ; border-radius: 28px ; float : right ; cursor : pointer ;}
#div 1 #div 2 { left : -4px ; width : 28px ; height : 28px ;border-radius: 50% ; background : red ;
position : absolute ;}
#div 3 { width : 90% ; height : 300px ; border : 2px solid #CCCCCC ;
position : relative ; float : left ; overflow : hidden ;}
#div 3 #div 4 { top : 0 ; left : 0 ; width : 100% ; position : absolute ; font-family : "微软雅黑" ;
font-size : 19px ; letter-spacing : 1px ; padding : 3px 6px ;}
3.js脚本代码
window.onload = function (){
var allDiv =document.getElementById( 'div' );
var oDiv =document.getElementById( 'div2' );
var aDiv =document.getElementById( 'div1' );
var textDiv1 =document.getElementById( 'div3' );
var textDiv2 =document.getElementById( 'div4' );
// 进度条拖动，内容跟着运动事件
oDiv.onmousedown = function (ev){
var oEvent =ev||event;
var disY =oEvent.clientY -oDiv.offsetTop;
if (oDiv.setCapture){
oDiv.onmousemove =mouseMove;
oDiv.onmouseup =mouseUp;
oDiv.setCapture();
} else {
document.onmousemove =mouseMove;
document.onmouseup =mouseUp;
}
function mouseMove(ev){
var oEvent =ev||event;
var t =oEvent.clientY -disY;
var bottomLine = aDiv.offsetHeight-oDiv.offsetHeight;
if (t <0){
t =0;
} else if (t >bottomLine){
t =bottomLine;
}
var percent =t/272;
oDiv.style.top =t+ 'px' ;
textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+ 'px' ;
};
function mouseUp(){
this .onmousemove = null ;
this .onmouseup = null ;
if (oDiv.releaseCapture){
oDiv.releaseCapture();
}
};
return false ;
};
// 点击进度条，开启定时器，小球做匀速运动到达后，清楚定时器
aDiv.onmousedown= function (ev){
var oEvent =ev||event;
var divY =oEvent.clientY-allDiv.offsetTop;
var timer = null ; var speed=10;
clearInterval(timer)
timer = setInterval( function (){
var percent=oDiv.offsetTop/272;
if (oDiv.offsetTop<divY-28){
oDiv.style.top =oDiv.offsetTop + speed + 'px' ;
textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent + 'px' ;
} else if (oDiv.offsetTop>divY){
oDiv.style.top =oDiv.offsetTop - speed + 'px' ;
textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent + 'px' ;
} else if (oDiv.offsetTop>260){
oDiv.offsetTop = 272+ 'px' ;
clearInterval(timer);
} else if (oDiv.offsetTop<10){
oDiv.offsetTop = 0+ 'px' ;
clearInterval(timer);
} else {
clearInterval(timer);
}
},10);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_43759645/article/details/84344195