Javascript Custom Scrollbar Issue

Question

Javascript Custom Scrollbar Issue

      var start_mouse_y = 0;
  var scroll_offset = 0;
  function SET_SCROLL_EVENT(e){
    document.getElementById("online_list_scroll").draggable = true;
    start_mouse_y = e.clientY;
  }
  function ADJUST_SCROLL_EVENT(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_FLAG = 0;
  document.onmouseup = function(){ SCROLL_FLAG = 0; };
  document.onmousemove = function(event){ if(SCROLL_FLAG == 1){ADJUST_SCROLL_EVENT(event);} };

Javascript code snippet above

        <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_FLAG == 0){ SET_SCROLL_EVENT(event); SCROLL_FLAG = 1; }"></div>
    </div>

HTML content above

The scrolling behavior of the scrollbar is erratic and fast, jerking back and forth. It does work but not smoothly as expected. Any help or insight would be greatly appreciated as I have been struggling with this all night.

Thank you in advance for any assistance provided.

javascript css html scrollbar

Answer 1

Answer №1

If you are facing an issue with local variables in your code, the following adjustments should help resolve it. These changes are specific to this particular problem and aim to fix the code. Below is the modified code with comments highlighting where the common mistake lies:

// First ensure that you have defined the necessary variables using 'var'.
        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;
// Initialize 'mouse_y' 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);

// Update 'start_mouse_y' to be equal to 'mouse_y', ensuring it tracks previous position correctly.

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

            // Additional code logic and error handling here
        }

        var SCROLL_ON = 0;
        document.onmouseup = function() {
            SCROLL_ON = 0;
        };

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

Thank you for your attention,

Answer 2

If you are facing an issue with local variables in your code, the following adjustments should help resolve it. These changes are specific to this particular problem and aim to fix the code. Below is the modified code with comments highlighting where the common mistake lies:

// First ensure that you have defined the necessary variables using 'var'.
        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;
// Initialize 'mouse_y' 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);

// Update 'start_mouse_y' to be equal to 'mouse_y', ensuring it tracks previous position correctly.

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

            // Additional code logic and error handling here
        }

        var SCROLL_ON = 0;
        document.onmouseup = function() {
            SCROLL_ON = 0;
        };

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

Thank you for your attention,

Javascript Custom Scrollbar Issue

Answer №1

Similar questions

When row highlights overshadow column outlines in an HTML table with CSS styling

Styles are ineffective on the focus property, although they do work before the focus is applied

Where should custom PHP code be placed in Prestashop 1.7.5?

Vanishing Act: React-js MUI Tooltip vanishes upon clicking

Tips for concealing an entire menu on WP, with the exception of items labeled as current-menu-ancestor

The blur effect isn't functional on the Firefox internet browser

Adjusting Card Size both Vertically and Horizontally in Bootstrap

Error encountered while building Dart WebUI

What is the recommended approach for conducting backend validation?

creating a div that functions similarly to a radio button

Creating a Node.js Express application paired with a React.js frontend

Using Flutter to navigate to a URL based on the image that was clicked

Searching for a way to smoothly scroll horizontally from right to left using the mouse wheel?

AngularJS is receiving an array of null inputs

How many requests per second can a Selenium client-sided load test handle?

Prevent certain images from loading by blocking them

Verify that all images retrieved through AJAX have finished loading before proceeding

Utilizing Ajax in Rails 5: Trigger form submission upon clicking either of the two radio buttons via Ajax

Is there a way to refresh a Thymeleaf table without reloading the entire page?

Using a personalized function in JQuery