Javascriptのカスタムスクロールバーのバグ

Question

 var start_mouse_y = 0; 
    var scroll_offset = 0; 
    function SET_SCROLL(e){ 
    document.getElementById("online_list_scroll").draggable = true; 
    start_mouse_y = e.clientY; 
    } 
    function ADJUST_SCROLL(e){ 
    dont_pass = (412 - set_scroll_height); 
    mouse_y = e.clientY; 
    scroll_top = parseInt(document.getElementById("online_list_scroll").style.top); 
    scroll_offset = (mouse_y - scroll_top) + 46; 
    new_top = scroll_top + (mouse_y - start_mouse_y); 
    document.getElementById("DEBUG").innerHTML = "my: "+mouse_y+"<br>new_top: "+new_top+"<br>scroll_offset: "+scroll_offset+"<br>scroll_top: "+scroll_top; 
    if(new_top <= 0){ 
     document.getElementById("online_list_scroll").style.top = 0+"px"; 
    }else if(new_top >= dont_pass){ 
     document.getElementById("online_list_scroll").style.top = dont_pass+"px"; 
    }else{ 
     document.getElementById("online_list_scroll").style.top = new_top+"px"; 
    } 
    scroll_bottom = set_scroll_height + new_top; 
    scroll_percent = scroll_bottom/412; 
    online_show = (document.getElementById("online_list").scrollHeight - 412) * scroll_percent; 
    online_show = Math.round(online_show); 
    document.getElementById("online_list").scrollTop = online_show; 
    } 
    var SCROLL_ON = 0; 
    document.onmouseup = function(){ SCROLL_ON = 0; }; 
    document.onmousemove = function(event){ if(SCROLL_ON == 1){ADJUST_SCROLL(event);} }; 

のjavascript ^^

 <div style="float: left; width: 13px; position: relative; height: 412px;"> 
     <div id="online_list_scroll" style="width: 5px; position: absolute; top: 0px; left: 4px; border-radius: 4px; background-color: #3f3f3f; height: 15px;" onmousedown="if(SCROLL_ON == 0){ SET_SCROLL(event); SCROLL_ON = 1; }"></div> 
    </div> 

HTML ^^

私は知らない理由が、非常に迅速かつ非定常流量でスクロールバーのスクロール。それはうまく動きますが、上下にスクロールするときにかわいく動きますが、そのように速くて速くぶつかるように動くように動きます。

お手数をおかけしていただきありがとうございました。一晩中これを行う方法を考え出しました。

Answer 1

次のコードが動作するlocal varに問題があります。一般的なものではなく、コードを修復しただけです。ここでは、よくある間違いがどこにあるのかをコメントで示すコードがあります。

//first make sure you have defined with var the variables you need.  
     var start_mouse_y = 0; 
     var mouse_y = 0; 
     var scroll_offset = 0; 
     function SET_SCROLL(e) { 
      document.getElementById("online_list_scroll").draggable = true; 
      start_mouse_y = e.clientY; 
// you need mouse_y to be initialized with start_mouse_y 
      mouse_y = start_mouse_y; 
     } 

     function ADJUST_SCROLL(e) { 
      var set_scroll_height = 0; 
      var dont_pass = (412 - set_scroll_height); 

// here you set the last mouse_y to be start_mouse_y or else it would be 
// a the first position of the mouse (eg. 8) subtracted from the current (eg. 50) 
// now remembering the last already added position (eg. 49) which is subtracted from 
// the current (eg. 50) it works just fine 

      start_mouse_y = mouse_y; 
      mouse_y = e.clientY; 
      var scroll_top = parseInt(document.getElementById("online_list_scroll").style.top); 
      scroll_offset = (scroll_top- mouse_y) + 46; 

      var new_top = scroll_top + (mouse_y- start_mouse_y); 

      console.log("my: " + mouse_y + "<br>new_top: " + new_top + "<br>scroll_offset: " + scroll_offset + "<br>scroll_top: " + scroll_top); 
      if(new_top <= 0) { 
       document.getElementById("online_list_scroll").style.top = 0 + "px"; 
      } else if(new_top >= dont_pass) { 
       document.getElementById("online_list_scroll").style.top = dont_pass + "px"; 
      } else { 
       document.getElementById("online_list_scroll").style.top = new_top + "px"; 
      } 
      var scroll_bottom = set_scroll_height + new_top; 
      var scroll_percent = scroll_bottom/412; 
      var online_show = (document.getElementById("online_list").scrollHeight - 412) * scroll_percent; 
      online_show = Math.round(online_show); 
      document.getElementById("online_list").scrollTop = online_show; 
     } 

     var SCROLL_ON = 0; 
     document.onmouseup = function() { 
      SCROLL_ON = 0; 
     }; 
     document.onmousemove = function(event) { 
      if(SCROLL_ON == 1) {ADJUST_SCROLL(event); 
      } 
     }; 

本当に

敬具、