Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项[转]

小鱼儿 2022-05-17 06:40 165阅读 0赞

## Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项 ##

**主题：**使用 Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项

**原理：**滚动条事件中，判断是否到达最底部，是的话调用添加方法，异步向尾部追加内容。

**补充1：**网上有找到一个此效果的网站：www.diandian.com

**       2：**替代方案：QQ空间的好友动态中使用在最底部放置一个按钮，之后异步加载数据！

**前置条件：**添加jquery.min.js

**源码：**

（以下代码，关于判断是否为最底部的方式，其精确性有待进一步研究）

\----------------------------------------------------------------------------------------------------------------------------------------------

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">  
                function insertcode() \{  
                    var $body = $("body");  
                    $body.append('<div style=\\" height:1000px; font-size:24px;\\">新增项目</div>')  
                    $("\#page\_tag\_load").hide();  
                \}  
                $(document).ready(function () \{  
  
                    $(window).scroll(function () \{  
                        var $body = $("body");  
                        var $html = "";  
                        $html += "<br/>" + ($(window).height() + $(window).scrollTop());  
                        $html += "<br/>window.height: " + $(window).height();  
                        $html += "<br/>body.height: " + $body.height();  
                        $html += "<br/>window.scrollTop: " + $(window).scrollTop();  
                        $("\#page\_tag\_bottom").html($html);

**/\*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度\*/**  
                        if (($(window).height() + $(window).scrollTop()) >= $body.height()) \{  
                            $("\#page\_tag\_load").show();  
                            //setTimeout(insertcode, 1000);/\*IE 不支持\*/  
                            insertcode();  
                        \}  
                    \});  
                \});  
    </script>  
</head>

<body>  
    <div style=" height:1000px; font-size:24px;">新增项目</div>  
    <div id="page\_tag\_bottom" style=" width:100%; position:fixed; top:0px; background-color:\#cccccc;height:100px;"></div>  
    <div id="page\_tag\_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:\#cccccc;height:50px;">加载中...</div>  
</body>

</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 滚动条自动滚动到最底部

简介：功能简介，js 滚动条自动滚动到最底部效果展示： ![bb23a00672684fb2b7cf683b81c3e66e.png][] 核心代码： w

朱雀/ 2023年09月26日 22:23/ 0 赞/ 193 阅读

相关 vue使用v-infinite-scroll实现滚动条边滚动边加载

vue使用v-infinite-scroll实现滚动条边滚动边加载 1，安装v-infinite-scroll npm install vue-infinite-s

缺乏、安全感/ 2023年07月23日 14:58/ 0 赞/ 13 阅读

相关列表懒加载滚动scroll事件不断自动触发问题

问题近期在开发时应用列表项懒加载时遇到了一个问题，当根据scrollTop来更新显示的列表项时，滚动事件反复触发，导致列表项不停得更新，滚动条自动由顶部滚动到底部。

系统管理员/ 2023年07月21日 05:40/ 0 赞/ 5 阅读

相关简易实现上拉加载操作（vue滚动条事件 - 获取滚动条距离底部距离）

通过获取到滚动条距离底部的距离，可以实现上拉加载操作有滚动条，div一定要设固定高度，然后overflow: auto出现滚动条 <div @scroll.pa

落日映苍穹つ/ 2023年02月25日 08:39/ 0 赞/ 14 阅读

相关 jquery滚动条加载数据

//滚动条 $(window).scroll(function () \{ var scrollTop = $(this).scrollTop(); var s

快来打我*/ 2022年07月11日 16:04/ 0 赞/ 321 阅读

相关 jQuery检测滚动条(scroll)是否到达底部

一、jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数： `$(document).height()` 获取整个页面的高度 `$

我就是我/ 2022年05月31日 03:29/ 0 赞/ 288 阅读

相关 jQuery - 将滚动条移动到最底部

jQuery 提供的 scrollTop() 方法，可以用来返回或设置匹配元素的滚动条的垂直位置。通过这个方法，配合获取到的 scrollHeight。我们可以将一个元素的

╰+哭是因爲堅強的太久メ/ 2022年05月22日 05:11/ 0 赞/ 614 阅读

相关 Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项[转]

Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项主题：使用 Jquery的 scroll事件，实现当滚动条到达最底部时，自动加载新项原理：滚

小鱼儿/ 2022年05月17日 06:40/ 0 赞/ 166 阅读

相关 jQuery 拉动滚动条到底部加载数据

代码很简单： <div id="assDiv" style="height: 350px;overflow-y: auto;" > </div

向右看齐/ 2022年04月14日 02:42/ 0 赞/ 379 阅读

相关 JQ判断滚动条到达底部

$(window).scroll(function() { if ($(document).scrollTop()<=0){

怼烎@/ 2022年01月29日 16:09/ 0 赞/ 315 阅读