JSRUN 用代码说话

scrollstop 事件

编辑教程
上一节 ： pageshow 事件 下一节 ： swipe 事件

scrollstop 事件

实例

页面滚动停止时弹出信息:

$(document).on("scrollstop",function(){
  alert("Stopped scrolling!");
});

定义和用法

scrollstop是页面滚动停止时触发的事件。

提示： 此事件通常附加到文档。

提示： scrollstart是页面开始滚动时触发的事件。

语法

 $("selector").on("scrollstop",function(event){...})
参数 描述
function(event) 必须。指定 scrollstop 事件触发时执行的函数。
该函数有可选的事件对象 ，事件对象可以是任何 jQuery 事件属性 (例如 event.target, event.type, 等)。

更多实例

滚动停止计数

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
x=0;
$(document).on("pagecreate","#pageone",function(){
  $("#test").on("scrollstop",function(){
    $("span").text(x+=1);
  });              
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1> scrollstop 事件</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>尝试滚动以下内容:</p>
    <div id="test" style="border:1px solid black;width:200px;height:250px;overflow:scroll;">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
 In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
 In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
 In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
 In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
    </div>  
    <p>停止滚动 <span>0</span> 次。</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

计算 scrollstop 事件触发的次数。

事件对象

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
  $(document).on("scrollstop",function(event){
    $("span.test").html("在 " + event.target.nodeName + " 原始上停止滚动。");
    $("span.test2").html("事件触发: " + event.type);
  });                       
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1> scrollstop 事件</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。可以滚动的文本。。</p>
    <span class="test" style="color:blue;"></span>
    <br><br>
    <span class="test2" style="color:red;"></span>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

使用 event.target 属性返回 scrollstop 事件触发的DOM元素。

上一节 ： pageshow 事件 下一节 ： swipe 事件
Mos固件，小电视必刷固件 ES6 教程 Vue.js 教程 JSON 教程 jQuery 教程 HTML 教程 HTML 5 教程 CSS 教程 CSS3 教程 JavaScript 教程 DHTML 教程 JSON在线格式化工具 JS在线运行 JSON解析格式化 jsfiddle中国国内版本 JS代码在线运行 PHP代码在线运行 Java代码在线运行 C语言代码在线运行 C++代码在线运行 Python代码在线运行 Go语言代码在线运行 C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统， 所有工程师都可以参与共同维护的闪电教程，让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编，让零散的知识点帮助更多的人。
X
支付宝
￥ 9.99
无法付款，请点击这里
金额： 0 元
备注：
转账时请填写正确的金额和备注信息，到账由人工处理，可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码， 此过程可能需要15秒钟