【www.bbyears.com--安卓教程】
最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。
在网上看原理，说实话没怎么看懂，就趁今天上午上安卓的时候，研究了一下，结果还算是满意吧。然后就包装一个对象。
使用方法很简单，就是自定义一个div，将这个对象导入做参数，new一下就可以。也可以自己定义滚动条的样式，只要自己修改一下样式表就可以
效果图：
代码如下：
代码如下
div{
padding:0px;
box-sizing:border-box;
margin:0px;
border:0px;
}
#div-5{
width: 700px;
height: 500px;
border:1px solid black;
position: relative;
overflow: hidden;
}
.ribbit-OF-div1{
width: 20px;
background-color: rgb(239, 238, 238);
border:1px solid rgba(0,0,0,0.5);
position: absolute;
right:0px;
top: 0px;
cursor:default;
}
.ribbit-OF-div2{
position: absolute;
top:0px;
right: 0px;
width: 100%;
height: 100px;
background-color:rgba(0,0,0,0.3);
border-radius: 10px;
}
.ribbit-OF-div3{
width: 100%;
height:auto;
background-color: lime;
}
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
123123
qwe
12asd23
asd3123
qwe123
235423423
azxc123
<scripttype=></scripttype=>
var div_5 = document.getElementById('div-5');
function OverFlow(element){
this.element = element;
this.ribbit_OF_div1 = document.createElement("div");
this.ribbit_OF_div2 = document.createElement("div");
this.ribbit_OF_div3 = document.createElement("div");
this.createDiv = function(){
this.ribbit_OF_div1.className = "ribbit-OF-div1";
this.ribbit_OF_div2.className = "ribbit-OF-div2";
this.ribbit_OF_div3.className = "ribbit-OF-div3";
this.ribbit_OF_div3.innerHTML = this.element.innerHTML;
this.element.innerHTML="";
this.element.appendChild(this.ribbit_OF_div3);
this.ribbit_OF_div1.appendChild(this.ribbit_OF_div2);
document.body.appendChild(this.ribbit_OF_div1);
this.ribbit_OF_div1.style.height = getComputedStyle(this.element,null).height;
this.ribbit_OF_div1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width)-parseInt(getComputedStyle(this.ribbit_OF_div1,null).width)))+"px";
this.ribbit_OF_div1.style.top = this.element.offsetTop+"px";
this.ribbit_OF_div2.style.top = "0px";
}
this.addAudo=function(){
var YY=null;//前鼠标位置
var topXX = 0;//前top位置
var topX = 0;//后top值
var vherght = parseInt(getComputedStyle(this.ribbit_OF_div3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动
var dst = 0;
//最大top移动位置
var top_x = parseInt(getComputedStyle(this.ribbit_OF_div1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_div2,null).height);
var thio = this;
window.onmousemove = function(e){
fun(e.clientY);
};
this.ribbit_OF_div2.onmousedown=function(e){
YY = e.clientY;
topXX =parseInt(this.style.top);
return false;
}
window.onmouseup=function(){
YY = null;
return true;
}
function fun(y){
if(top_x>=topX&&topX>=0&&YY!=null){
topX = y-YY+topXX;
if(topX<0)topX=0;
if(topX>top_x)topX=top_x-1;
thio.ribbit_OF_div2.style.top = (topX-1)+"px";
dst = topX*vherght/top_x;
thio.element.scrollTop = dst;
}
}
}
this.createDiv();
this.addAudo();
}
new OverFlow(div_5);