返回值:jQueryscroll(handler(eventObject))

为 JavaScript 的 "scroll" 事件绑定一个处理函数,或者触发元素上的该事件。

带有参数的该方法是 .bind('scroll', handler) 的快捷方式,不带参数的该方法是 .trigger('scroll') 的快捷方式。

若用户在元素内执行了滚动操作,就会触发该元素上的 scroll 事件。该事件不仅可以应用在 window 对象上,也可以在可滚动的 frames 或元素上使用,该元素的 overflow CSS 属性被设置成 scroll (或 auto 当元素实际的高或宽比其内容的高或宽小的场合)。

举例来说,请看下面的HTML:

<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui
  officia deserunt mollit anim id est laborum.
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>

从上面定义的 div 样式我们可以看到,由于 div 足够小,所以可以滚动:

可以向下面这样,将 scroll 事件绑定到元素上:

$('#target').scroll(function() {
  $('#log').append('<div>Handler for .scroll() called.</div>');
});

现在,当用户在文本上进行上下滚动时,就会触发滚动事件,从而向 <div id="log"></div> 中追加了如下信息:

Handler for .scroll() called.

我们可以调用不带参数的 .scroll() 方法,手动触发这个事件:

$('#other').click(function() {
  $('#target').scroll();
});

在代码执行后,如果你点击 Trigger the handler 将同样会追加上面的消息。

无论什么原因导致元素滚动的位置发生了变化,都会触发 scroll 事件。例如,在滚动条上点击了鼠标或进行了拖拽,在元素内进行了拖拽,按了方向键,或者使用了鼠标滚轮,都会触发该事件。

示例:

在页面滚动时触发一系列动作:

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>

<script>


    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () { 
      $("span").css("display", "inline").fadeOut("slow"); 
    });



</script>
</body>
</html>

演示: