オリジナルjsを利用してカスタムスクロールバーを実現します.
29657 ワード
1.HTMLファイル
div 1はスクロールバーで、div 2はスクロールボールで、div 3はテキストエリアの容器で、div 4はテキストエリアです.
コンテナオーバーフローで隠し、テキストエリアの絶対位置をjsに渡します.
div 1はスクロールバーで、div 2はスクロールボールで、div 3はテキストエリアの容器で、div 4はテキストエリアです.
<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;
}
#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.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);
}
}