原生js实现自定义滚动条

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

1.HTML文件

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

 

 
 
 
 

 

 
CSS3 教程
 
CSS3 教程
 
CSS3 简介
 
CSS3 边框
 
CSS3 圆角
 
CSS3 背景
 
CSS3 渐变
 
CSS3 文本效果
 
CSS3 字体
 
CSS3 2D 转换
 
CSS3 3D 转换
 
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: 2px solid #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: 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.offsetTopdivY){
 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);
 
 }
 
}

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