js制作css滚动条,原生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.οnmοusedοwn=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

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);

}

}

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