Jquery原生scroll()方法滚动到底部加载数据

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情
<div class="div-tb"></div>

<script type="text/javascript">
var status = 0;//标示还有没有待展示的分页数据(为1则表示分页数据加载完毕)
var index = 2;//内容列表 当前分页页码(滚动从第2页开始)
$(document).ready(function () {
    $(".div-tb").scroll(function () {
            var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
            var nScrollTop = 0;   //滚动到的当前位置
            var nDivHight = $(".div-tb").height();
            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            if (nScrollTop + nDivHight >= nScrollHight) {
                //滚动条已滚动到底部
                //console.info(status);
                if (status == 0) {//尚有待展示的分页数据
                    LoadData(index);//加载相应页码的数据
                    index++;//页码自增
                }
            }
        });
});
</script>

jQuery实现局部区域滚动滚动底部自动加载数据的问题总结与实现方法 1 需求背景 在我们做管理系统,需要从后台数据库取出数据显示到前台时,可能我们的做法就是将数据全部取出然后利用jQuery动态添加到表格当中,但是当我们取出的量非常大时问题就出现了,我们会发现页面加载的速度非常慢,这时我们就可利用分页或者这种监听滚动条来自动加载数据,这种技术也称为“懒加载” 2 实现过程中遇到的问题总结 (1)首先就是在滚动滚动底部之后,监听事件被多次触发。这个问题的解... 阅读详情

相关推荐

告别分页器!用ElementUI的el-table-infinite-scroll插件实现滚动底部自动加载数据

本文详细介绍了如何使用ElementUI的el-table-infinite-scroll插件实现表格滚动底部自动加载数据的功能,替代传统分页器。通过核心原理分析、环境准备、基础实现到高级配置与性能优化,为开发者提供了一套完整的解决方案,特别适合需要流畅浏览体验的数据密集型应用。

weixin_30493401的博客 588

轻量级jquery scrollLoading 延迟加载使用

scrollLoading使用 不管怎样,首先调用jQuery库文件,还有jquery.scrollLoading.js,您可以直接在页面的某处添上如下的代码: http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">>  http://www.zhangxinxu.com/study/js/mini/jquery.sc

xmlife的专栏 2372

jQuery实现滚动底部时自动加载更多的方法示例

本文实例讲述了jQuery实现滚动底部时自动加载更多的方法。分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> [removed][removed] <script typ

jquery 滚动底部加载

jquery代码 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight == scrollHeight) {    //此处是滚动条到底部

yuhuamei的博客 968

js/jquery控制页面滑动到底部时自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,

馨新欣心 1万+

html 下拉滚动加载,原生js滚动底部加载数据和下拉刷新 Scrollload

初衷如今移动端站点越来越多,滚动底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有。虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处理不好滚动很有可能会不流畅。既然很多页面和项目都需要,当然最需要有一个复用性高的插件。但是我却一直没找到特别好用的插件,有些需要依赖jquery,但貌似编写这样的插件时jquery并没有带来任何的便利。...

weixin_39907133的博客 813

JS判断scroll是否滚动底部

scroll用法在这里 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scroll Element.scroll() scroll()方法是用于在给定的元素中滚动到某个特定坐标的Element接口。 Syntax element.scroll(x-coord, y-coord) element.scroll(options) Parameters x-coord是指在元素左上方区域横轴方向上想要显示的像素。 y...

GET知识不迷路,点赞评论加关注! 3988

【无限滚动加载数据】—infinite-scroll插件的使用

网上对于infinite-scroll插件使用的例子不多。但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式。 官网上有对infinite-scroll的详细描述,但一般人即使看未必看得懂,看得懂未必就调试成功。所以借今晚有点时间,把跑通的例子供大家借鉴。 一.无限滚动概念 首先,它是基于Jquery的,另外还要明白无限滚动的概念:无限滚动的实现原理就是当你在

︿( ̄︶ ̄)︿ 9万+

js实现滚动滚动到页面底部继续加载

感谢原文作者:chua1989 原文链接:https://www.jb51.net/article/76645.htm 简介 这篇文章主要为大家详细介绍了js实现滚动滚动到页面底部继续加载,原理很简单,就是为window添加一个scroll事件,需要的朋友可以参考下。 这个实例应该说可以很简单,直接使用jQuery方法来处理也是可以的。但本文底层使用原生js来处理,遇到一些小知识点可以分析一下也算有所得。 原理 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件.

Jason的学习笔记 2562

animatescroll.js vs 原生scroll:为什么选择这款jQuery滚动插件?

在网页开发中,滚动交互是提升用户体验的关键元素。原生JavaScript的scroll方法虽然基础实用,但在实现平滑滚动和复杂动画效果时往往显得力不从心。而**animatescroll.js**作为一款轻量级jQuery插件,通过简单易用的API和丰富的自定义选项,让开发者能够轻松实现专业级的滚动动画效果。本文将深入对比原生scroll与animatescroll.js的差异,帮助你理解为何这款

gitblog_00012的博客 874

jQuery判断div滚动底部,并加载数据的示例,防止重复加载

(1)简单示例: var msg_list_loading = false; $('.msg_list').on('scroll', function(){ if ( ! msg_list_loading ){ load_more_msg(); } }) fun...

☆╮123☆ 2705

Jquery网页滚动滚动到最下面自动加载下一页

转自:Jquery网页滚动滚动到最下面自动加载下一页 <head> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> //(假设网速超快加载数据又很少,网页可以在瞬间或者1、2秒内就可以加载完成) <script type="text/...

czlearnunity3d的博客 1121

网页滚动底部后触发事件

//滚动底部触发函数,可以用于分页,触发页面加载 window.onscroll = function(){ //变量scrollTop是滚动滚动时,距离顶部的距离 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //变量windowHeight是可视区的高度 var windowHeight = document.documentEl...

滴水石穿 1723

jQuery 事件 scroll() 方法的使用教程

当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。scroll() 函数触发 scroll 事件。或者如果设置了 function 函数,则规定当发生 scroll 事件时执行的代码。 首先介绍一下(document).height()与$(window).height()的区别: $(document).heig...

cuishouming的博客 6472

vue滚动底部加载数据并且防止触发多次

源码Demo: <template> <div> <ul class="list"> <li v-for="(item,index) in listData" :key="index" :v-if="listData">{{item.album_title}}</li> </...

baidu_41601299的博客 5778

jquery.autocomplete 插件扩展滚动加载更多

项目中用到jquery.autocomplete插件,但是插件的原有功能,不能满足项目全部需求所以修改了增加了以下几点功能: 1 粘贴文本自动加载数据 2 滚动滚动底部加载更多数据 3 与页面插件联动更新数据(清除缓存) 4 增加插件赋值给一个隐藏域,就可以得到文本和值 (做asp.net的用起来比较方便)

spyking945 5834

jq滚动底部自动加载数据实例

jq滚动底部自动加载数据实例|幸凡学习网 html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;} body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;f

XINGXUEXX的博客 1582

Jqueryscroll事件,实现当滚动条到达最底部时,自动加载新项[转]

Jqueryscroll事件,实现当滚动条到达最底部时,自动加载新项 主题:使用 Jqueryscroll事件,实现当滚动条到达最底部时,自动加载新项 原理:滚动条事件中,判断是否到达最底部,是的话调用添加方法,异步向尾部追加内容。 补充1:网上有找到一个此效果的网站:www.diandian.com        2:替代方案:QQ空间的好友动态中使用在最底部放置一个按钮,之后异

muzizhuben的专栏 2万+

Infinite-Scroll无限滚动加载数据

无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。 首先我们在页面上先放置10条数据,即第一页,每一项都是p标签: [code="java"] 1、PHP生成图片验证码 2、jQuery实现table上移下移和置顶 3、基于jQuery的cookie插件 4、jQuery仿淘宝图片放大镜插件imagezoom ...

hjl416148489的博客 1237
上一篇: WebUploader 图片上传插件前后端代码
下一篇: 常用的正则验证
兰給
博客等级 码龄14年 25粉丝 29原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值