jquery实现无限滚动之可控滚动

最新推荐文章于 2025-07-21 10:43:04 发布

转载最新推荐文章于 2025-07-21 10:43:04 发布 · 418 阅读

js问题分类专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的可控无限滚动加载技术。该技术能够根据用户的滚动位置动态加载新的段落内容，同时限制了加载的最大数量。通过检测用户是否滚动到页面底部来触发数据加载，实现了流畅的用户体验。

<html>
 <head>
 <title>无限滚动之可控滚动</title>
 <style type="text/css">
 body{ font-family: "Trebuchet MS",verdana,arial;}
 #loading{ display:none; font-weight:bold;color:#FF0000;}
 p { padding:10px;}
 </style>

 </head>
 <body>
 <div id="container">
 Test Paragraph 1
 Test Paragraph 2
 Test Paragraph 3
 Test Paragraph 4
 Test Paragraph 5
 Test Paragraph 6
 Test Paragraph 7
 Test Paragraph 8
 Test Paragraph 9
 Test Paragraph 10
 Test Paragraph 11
 Test Paragraph 12
 Test Paragraph 13
 Test Paragraph 14
 Test Paragraph 15
 Test Paragraph 16
 Test Paragraph 17
 Test Paragraph 18
 Test Paragraph 19
 Test Paragraph 20
 </div>
 loading data... 
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function()
 {
 $(window).scroll(loadData);
 });

 var counter = 0;
 function loadData()
 {
 if(counter <= 5) //控制显示长度
 {
 if (isUserAtBottom())
 {
 getData();
 }
 }
 }
 function isUserAtBottom()
 {
 return ((($(document).height() - $(window).height()) - $(window).scrollTop()) <= 50) ? true : false;
 }
 function getData()
 {
 $(window).unbind('scroll');
 $('#loading').show();

 $.get(
 'data.php',
 {},
 function(response)
 {
 counter++;
 $('#loading').hide();
 $('#container').append(response);
 $(window).scroll(loadData);
 });
 }
 </script>
 </body>

</html>

php代码

<?php

sleep(2);
echo 'This data has been loaded from server...';

?>