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

【问题标题】：How to detect the drag scrollbar event with jQuery?如何使用 jQuery 检测拖动滚动条事件？
【发布时间】：2015-04-12 08:58:15
【问题描述】：

我有一个可滚动的<div> (overflow: auto;)，我想检测在 div 内拖动滚动条的事件。我当前的代码是：

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

但只有在使用鼠标滚轮时才会触发。如果我在内容溢出时拖动浏览器生成的<div>的滚动条，则不会触发该事件。 我应该添加什么才能让它工作？

【问题讨论】：

什么是scrollableDiv？选择器、DOM 元素、jquery 对象？
@hindmost，见编辑。谢谢。
AFAIK .on() 不希望 jquery 对象作为参数。为什么不立即将监听器绑定到scrollableDiv:scrollableDiv.on(..)？
为我使用on('scroll') seems to work，并对拖动滚动条做出反应。
您找到解决方案了吗？

标签： javascript jquery scroll overflow scrollable

【解决方案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>

【讨论】：