如何使用jQuery检测拖动滚动条事件？

Question

我有一个可滚动的 <div>（overflow: auto;），我想检测在该 div 内拖动滚动条的事件。我当前的代码如下：

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

但它只在使用鼠标滚轮时触发。如果我拖动浏览器生成的

的滚动条，当内容溢出时，事件不会被触发。我需要添加什么才能使其正常工作？

- user2335065

---

scrollableDiv是什么？选择器、DOM元素、jQuery对象？ - hindmost

@hindmost，请查看编辑。谢谢。 - user2335065

据我所知，.on()不期望将jquery对象作为参数。为什么不立即将监听器绑定到scrollableDiv上：scrollableDiv.on(..)？ - hindmost

使用[on('scroll')]（http://jsfiddle.net/davidThomas/cqpmL96o/）对我来说似乎有效，并且可以对拖动滚动条做出反应。 - David Thomas

你找到解决方案了吗？ - Aqeel Ashiq

Answer 1

试试这个：

$('.scrollablediv').scroll(function() { //做一些事情 });

$("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