How to detect the drag scrollbar event with jQuery?

Detecting the drag scrollbar event directly using jQuery is not straightforward, as there is no built-in event specifically designed for this purpose. However, you can still achieve a similar effect by combining different events to detect when the scrollbar is being dragged.

Here's an example of how you can detect the drag scrollbar event using jQuery:

htmlCopy code
<div id="scrollableContainer" style="overflow: auto; height: 200px;">
  <!-- Your content goes here -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    var isDraggingScrollbar = false;

    // Handle scroll event to detect scrollbar drag
    $("#scrollableContainer").on("scroll", function() {
      if (isDraggingScrollbar) {
        // Code to execute when the scrollbar is being dragged
        console.log("Scrollbar is being dragged");
      }
    });

    // Handle mouse events to track when the scrollbar is being dragged
    $("#scrollableContainer").on("mousedown", function() {
      isDraggingScrollbar = true;
    });

    $(document).on("mouseup", function() {
      isDraggingScrollbar = false;
    });
  });
</script>

In this example, we have a scrollable container with the ID "scrollableContainer" that has a fixed height and an "overflow: auto" CSS property to display the vertical scrollbar when necessary.

We use three events to detect the drag scrollbar action:

1. scroll event: This event is triggered whenever the scroll position of the container changes, which includes both dragging the scrollbar and other scroll actions (e.g., using mousewheel or arrow keys). Inside the scroll event handler, we check if the isDraggingScrollbar flag is set to true, which indicates that the scrollbar is being dragged.

2. mousedown event: This event is triggered when the mouse button is pressed down on the scrollable container. We set the isDraggingScrollbar flag to true when this event occurs, indicating that the scrollbar drag has started.

3. mouseup event: This event is triggered when the mouse button is released after dragging the scrollbar. We set the isDraggingScrollbar flag to false when this event occurs, indicating that the scrollbar drag has ended.

By combining these events, we can detect when the scrollbar is being dragged and execute specific code or actions when this occurs.