在有的浏览器中可能会出现 累计 执行重复执行的情况， 可以再 准备执行前和执行完毕加以个 执行完毕的标记，当 判断 上一次执行完毕 再 执行该次操作
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现当拉动滚动条到底部加载数据</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//首先给窗口绑定事件scroll
$(window).bind("scroll",function() {
// 然后判断窗口的滚动条是否接近页面底部，这里的20可以自定义
if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
//我这里偷个懒，没有写ajax的调用，直接触发了链接的click事件。
$("#container").append('<div style="height:500px">dd</div>');
}
})
</script>
</head>
<body>
<div id="container">
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
</div>
</body>
</html>
另外 每次下拉到最后 浏览器会记住当前滚动条位置 会照成刷新页面后 直接执行 操作，所以在刷新页面时要执行 滚动条到顶部的操作
<script>
$(document).ready(function(){
$('body,html').animate({scrollTop:0});
});
</script>
在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码：
$(window).height() //浏览器时下窗口可视区域高度
$(document).height() //浏览器时下窗口文档的高度
$(document.body).height() //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器时下窗口可视区域宽度
$(document).width() //浏览器时下窗口文档对于象宽度
$(document.body).width() //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding margin
相关推荐
**jQuery滚动加载数据实现瀑布流布局** 在网页设计中，瀑布流（Masonry）布局是一种流行的方式，它能展示信息时让页面看起来更加美观且有层次感，类似于QQ空间动态加载数据的效果。当用户滚动页面时，内容会随着...
本文实例讲述了jQuery实现当拉动滚动条到底部加载数据的方法。分享给大家供大家参考，具体如下： 滚动条到底部加载数据原理很简单，就是为window或者滚动元素添加一个scroll事件，浏览器每次触发scroll事件时判断...
JQuery的`$(window).scroll()`事件监听用户的滚动行为，`$(document).height()`获取文档总高度，`$(window).height()`获取窗口可视区域高度，以及`$(window).scrollTop()`获取滚动条距离顶部的距离，这些方法共同...
// 获取当前滚动条位置 if (scrollTop + windowHeight >= documentHeight) { // 检查是否接近底部 // 加载更多数据的逻辑 } ``` 当满足条件时，意味着用户已经滚动到了页面底部，接下来就是加载更多数据的部分。...
本篇文章将深入探讨如何使用jQuery来判断滚动条是否滚动到页面底部，并在此基础上执行特定的事件。首先，我们需要了解三个关键的DOM元素属性：clientHeight、offsetHeight和scrollTop。 1. **clientHeight**： ...
总的来说，"判断滚动条是否滚动到底部"和"判断页面数据是否修改"是前端开发中的基础任务，涉及了事件处理、DOM操作以及兼容性处理等多个方面。通过理解并熟练运用这些知识点，开发者可以创建出更加智能和响应式的...
《jQuery动态滚动条加载效果详解》 在网页设计与开发中，用户界面的交互体验是至关重要的，其中滚动条加载效果就是提升用户体验的一种巧妙手段。本篇将详细讲解如何使用jQuery实现动态滚动条加载效果，以及相关的...
本文将详细解析如何使用jQuery来实现判断滚动条滚动到document（文档）底部的方法。这个功能通常用于动态加载数据，例如分页加载文章、图片或其他内容。 首先，我们需要了解几个关键的概念： 1. **滚动条滚动高度*...
5. **防止重复加载**：为了防止用户快速滚动时重复加载数据，我们需要在请求期间禁用滚动事件监听，直到请求完成并添加新内容后才重新启用。 在 JasonLau-jQuery-Screw-d572c76 这个版本中，我们可以看到源代码、...
3. **判断是否滚动到底部**：通过比较滚动条的当前位置与文档总高度的关系来判断是否到达底部。例如，`$(window).scrollTop() + $(window).height() >= $(document).height()`，如果满足这个条件，则表示用户已经...
总结来说，使用jQuery实现滚动条下拉时无限加载的关键在于监听滚动事件、判断是否达到加载条件、异步请求新数据以及将新数据插入到页面中。通过这个实例，你可以了解这一机制，并在此基础上进行定制以适应你的项目...
标题中的“拖动滚动条自动加载图片页面”指的是网页设计中的一个常见技术，通常被称为“无限滚动”或“滚动监听加载”。这种技术允许用户在滚动页面时，内容（如图片）会随着滚动条的移动而逐步加载，而不是一次性...
网页图片随滚动条加载是一种优化网页性能的技术，它主要针对含有大量图片的页面，通过只在用户滚动到可视区域时加载图片，来提高网页的加载速度和用户体验。这种技术也被称为懒加载（Lazy Loading）或者延迟加载（On...
无限滚动加载，也称为“滚动监听”或“懒加载”，通过监听滚动条位置，判断是否接近页面底部。一旦达到设定的阈值，就会通过Ajax异步请求获取新的数据（通常是JSON格式），然后使用JavaScript动态插入到页面中。这种...
这里我们讨论的是如何使用jQuery来判断滚动条是否已经到达页面底部。jQuery提供了一个简洁的方式来处理这种需求，主要涉及到DOM元素的几个关键属性：scrollTop、clientHeight和scrollHeight。 首先，我们来看一下这...
在IT行业中，jQuery是一款...通过以上知识点，我们可以构建一个功能完善的jQuery块滚动条，不仅提升了页面的交互性，还优化了页面加载效率。在实际项目中，应根据具体需求进行适当的调整和定制，以达到最佳的用户体验。
标题中的"拉动滚动条加载数据的jquery代码"指的是在网页中实现无限滚动或者叫滚动加载（Lazy Loading）的一种技术，这种技术通常用于提高用户体验，尤其是处理大数据量时，避免一次性加载所有内容导致页面加载速度变...