Как определить событие перетаскивания с помощью jQuery?

Question

У меня есть прокрутка <div> (overflow: auto;) и я хочу обнаружить событие перетаскивания полосы прокрутки внутри div. Мой текущий код:

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

Но это срабатывает только при использовании колесика мыши. Если я перетащить полосу прокрутки <div> генерируется браузером, когда содержимое переполняется, событие не инициируется. Что я должен добавить, чтобы это работало?

Answer 1

Попробуй это:

$('.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>