当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .scroll()用法及代码示例


用法 
.scroll( handler ) => jQuery

说明：将事件处理程序绑定到 "scroll" JavaScript 事件，或在元素上触发该事件。

  • 添加的版本：1.0.scroll( handler )

    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

  • 添加的版本：1.4.3.scroll( [eventData ], handler )

    • eventData
      类型：Anything
      包含将传递给事件处理程序的数据的对象。
    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

  • 添加的版本：1.0.scroll()

    • 此签名不接受任何参数。

此方法是第一和第二变体中.on( "scroll", handler ) 和第三变体中.trigger( "scroll" ) 的快捷方式。

当用户滚动到元素中的不同位置时，scroll 事件被发送到元素。它适用于window 对象，也适用于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>

样式定义的存在是为了使目标元素小到可以滚动：

图 1 - 呈现的 HTML 的插图

scroll 事件处理程序可以绑定到此元素：

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

现在，当用户向上或向下滚动文本时，一条或多条消息会附加到 <div id="log"></div> ：

.scroll() 的处理程序被调用。

要手动触发事件，请应用不带参数的.scroll()：

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

这段代码执行后，点击触发处理程序还将附加消息。

每当元素的滚动位置发生变化时，无论原因如何，都会发送 scroll 事件。在滚动条上单击或拖动鼠标、在元素内拖动、按箭头键或使用鼠标滚轮都可能导致此事件。

其他注意事项：

  • 由于 .scroll() 方法只是 .on( "scroll", handler ) 的简写，因此可以使用 .off( "scroll" ) 进行分离。

例子：

滚动页面时执行以下操作：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.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>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .scroll()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。