How to detect a drag event using jQuery?

Question

I have scrollable <div>( overflow: auto;) and I want to detect the event of dragging the scrollbar inside a div. My current code is:

 var scrollableDiv =  $('.scrollablediv');   
 $(document).on('DOMMouseScroll mousewheel touchmove scroll', scrollableDiv, function(e){   
    // do something  
 });

But this only works when using the mouse wheel. If I drag the scroll bar <div>generated by the browser when the content is full, the event will not be fired. What should I add for this?

Answer 1

Try the following:

$('.scrollablediv').scroll(function() { //do something });

$("span").hide();

$(".scrollableDiv").scroll(function() {
   $("span").css( "display", "block" ).fadeOut("slow");
 });

.scrollableDiv {
  height: 100px;
  width: 50px;
  overflow: auto;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollableDiv">
   foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>
  foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
</div>
<span>scrolling...</span>

Run codeHide result