4

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

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

But it's only triggered when use the mouse wheel. If I drag the scrollbar of the <div> generated by the browser when the content overflows, the event is not triggered. What should I add for it to work?

user2335065
  • 2,066
  • 3
  • 25
  • 43

1 Answers1

0

Try this:

$('.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>
iisurge
  • 171
  • 5