滚屏事件(scrollstart、scrollstop)

scrollstart:当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作,当滚屏结束时按队列执行这些dom操作,我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作。

$(document).ready(function(){

  $('body').bind('scrollstart', function(event) {
    // Add scroll start code here
  });

});

scrollstop:滚屏结束时触发。

$(document).ready(function(){

  $('body').bind('scrollstop', function(event) {
    // Add scroll stop code here
  });

});

 

<!DOCTYPE html>
<html>
    <head>
        <title>Ajax测试</title>
        <meta charset="gbk">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
        <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
        <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
	    <div data-role="page" data-theme="b">
        <div data-role="header"></div>
        <div data-role="content">
            <script>
				//scrollstart事件
				function scrollstartFunc(evt) {
					try
					{
						var target = $(evt.target);
						while (target.attr("id") == undefined) {
							target = target.parent();
						}
						//获取触点目标id属性值
						var targetId = target.attr("id");
						alert("targetId: " + targetId);
					}
					catch (e) {
						alert('myscrollfunc:' + e.message);
					}
				}
				function myinit() {
					//绑定上下滑动事件
					$("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
				}
				window.onload = myinit;
			</script>
			<!-- listview测试 -->
			<ul id="myul" data-role="listview" data-inset="true">
				<li data-role="list-divider">信息列表</li>
				<li id="li1" data-role="fieldcontain">信息1</li>
				<li id="li2" data-role="fieldcontain">信息2</li>
				<li id="li3" data-role="fieldcontain">信息3</li>
				<li id="li4" data-role="fieldcontain">信息4</li>
				<li id="li5" data-role="fieldcontain">信息5</li>
				<li id="li6" data-role="fieldcontain">信息6</li>
				<li id="li7" data-role="fieldcontain">信息7</li>
				<li id="li8" data-role="fieldcontain">信息8</li>
				<li id="li9" data-role="fieldcontain">信息9</li>
				<li id="li10" data-role="fieldcontain">信息10</li>
			</ul>
        </div>
    </body>
</html>