ネイティブ js でカスタム スクロール バーを実装する

<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>
 CSS3 3D 変換
 <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>

*{パディング: 0; マージン: 0;}
#div{top:200px;left:25%;width: 50%;height: 300px;position: absolute; 
}
#div1{幅: 20px; 高さ: 300px; 位置: 相対; 
背景: #CCCCCC; 境界線の半径: 28px; フロート: 右; カーソル: ポインター;}
#div1 #div2{左: -4px;幅: 28px;高さ: 28px;境界線の半径: 50%;背景: 赤;
位置: 絶対;}

#div3{幅: 90%; 高さ: 300px; 境界線: 2px 実線 #CCCCCC;
位置: 相対; フロート: 左; オーバーフロー: 非表示;}
#div3 #div4{top:0;left:0;width: 100%; position: absolute; font-family: "Microsoft YaHei";
フォントサイズ: 19px; 文字間隔: 1px; パディング: 3px 6px;}

window.onload = 関数(){
 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||イベント;
 
 var disY =oEvent.clientY -oDiv.offsetTop;
 
 oDiv.setCapture の場合 {
 oDiv.onmousemove =マウス移動;
 oDiv.onmouseup =マウスアップ;
 
 oDiv.setCapture();
 }それ以外{
 document.onmousemove =マウス移動;
 document.onmouseup =マウスアップ;
 }
 
 関数mouseMove(ev){
 var oEvent =ev||イベント; 
 var t =oEvent.clientY -disY; 
 var bottomLine = aDiv.offsetHeight - oDiv.offsetHeight; 
 
 
 t < 0の場合{
 t =0;
 }そうでない場合(t >bottomLine){
 t = ボトムライン;
 }
 
  varパーセント =t/272;
  
 oDiv.style.top = t+'px';
 textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*パーセント+'px';
 
 };
 
 関数mouseUp(){
 this.onmousemove = null;
 this.onmouseup = null;
 
 oDiv.releaseCapture の場合 {
 oDiv.releaseCapture();
 }
 };
 
 false を返します。
 };
 
 // プログレスバーをクリックしてタイマーを開始します。ボールが一定の速度でターゲットに到達したら、タイマーをクリアします。aDiv.onmousedown=function(ev){
 var oEvent =ev||イベント; 
 var divY =oEvent.clientY-allDiv.offsetTop;
 var タイマー =null;var 速度 = 10;
 
 
 クリアインターバル(タイマー)
 タイマー = setInterval(関数(){
 var パーセント = oDiv.offsetTop / 272;
 
 
 oDiv.offsetTop<divY-28){
 oDiv.style.top = oDiv.offsetTop + スピード + 'px';
 textDiv2.style.top = -(textDiv2.offsetHeight-textDiv1.offsetHeight)*パーセント + 'px';
 }それ以外の場合(oDiv.offsetTop>divY){
 oDiv.style.top = oDiv.offsetTop - 速度 + 'px';
 textDiv2.style.top = -(textDiv2.offsetHeight-textDiv1.offsetHeight)*パーセント + 'px';
 }それ以外の場合(oDiv.offsetTop>260){
 oDiv.offsetTop = 272+'px';
 タイマーの間隔をクリアします。
 }それ以外の場合(oDiv.offsetTop<10){
 oDiv.offsetTop = 0+'px';
 タイマーの間隔をクリアします。
 }それ以外{
 タイマーの間隔をクリアします。
 }
 
 
 },10);
 
 }
 
}