Javascript自定义滚动条Bug

Javascript Custom Scrollbar Bug

本文关键字：Bug 滚动条 自定义 Javascript      更新时间：2023-09-26
      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 ^ ^

我不知道为什么，但滚动条滚动在一个非常快和不稳定的流量。它可以工作，但只是在上下滚动时抽搐，当你朝一个方向移动时，它会越来越快地朝那个方向移动。

谢谢你的帮助，我整晚都在想怎么做。

本地变量有问题，下面的代码可以工作。不是一般的东西，只是修复了代码。下面是带有注释的代码，这是常见的错误。

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

问好,

相关文章：