php+html+js+滚动加载,jQuery局部div滚动加载远程数据

布满荆棘的人生 2023-01-16 04:50 176阅读 0赞

之前我们介绍了浏览器滚动条远程加载数据http://www.sucaihuo.com/js/9.html，这次我们介绍PHP+mysql局部div鼠标滚轮远程加载数据

![bcd9b06adf51db1492871e3888e799e7.png][]

下载资源

下载积分：

110

积分

加载内容区域\#lists

$(function() \{

var totalpage = 6; //总页数，防止超过总页数继续滚动

var winH = $(window).height(); //页面可视区域高度

$("\#lists").scroll(function() \{

if (i < totalpage) \{ // 当滚动的页数小于总页数的时候，继续加载

var pageH = $(document.body).height();

var scrollT = $(window).scrollTop(); //滚动条top

var aa = (pageH - winH - scrollT) / winH;

if (aa < 0.01) \{

getJson(i)

\}

\} else \{ //否则显示无数据

showEmpty();

\}

\});

getJson(0); //加载第一页

\});

function getJson(page) \{

var msg\_list = $('\#lists');

if (msg\_list.height() + msg\_list\[0\].scrollTop >= msg\_list\[0\].scrollHeight - 60) \{

$(".nodata").show().html("![81bee3933458743c68edb2890c63e316.gif][]");

$.getJSON("ajax.php", \{page: i\}, function(json) \{

if (json) \{

var str = "";

$.each(json, function(index, array) \{

var str = "

";

var str = str + "

" + array\['id'\] + "、" + array\['title'\] + "

";

$("\#lists").append(str);

\});

$(".nodata").hide()

\} else \{

showEmpty();

\}

\});

i++;

\}

\}

function showEmpty() \{

$(".nodata").show().html("别滚动了，已经到底了。。。");

\}

[bcd9b06adf51db1492871e3888e799e7.png]: /images/20221022/7d7e1766857b40ecb85474bd12aa07f2.png
[81bee3933458743c68edb2890c63e316.gif]: /images/20221022/0e251b5fb18f432aa7c45506765b4408.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js滚动加载

迎大家一起交流学习n(\*≧▽≦\*)n 效果： ![20190910110637264.gif][] **html** <div> <d...

Dear 丶/ 2024年04月18日 17:30/ 0 赞/ 64 阅读

相关 php+html+js+滚动加载,jQuery局部div滚动加载远程数据

之前我们介绍了浏览器滚动条远程加载数据http://www.sucaihuo.com/js/9.html，这次我们介绍PHP+mysql局部div鼠标滚轮远程加载数据 ![b

布满荆棘的人生/ 2023年01月16日 04:50/ 0 赞/ 177 阅读

相关 php 滚动加载 js,jquery浏览器滚动加载技术实现方案

要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤

曾经终败给现在/ 2022年11月12日 10:57/ 0 赞/ 237 阅读

相关 jquery实现浏览器滚动加载

var totalheight = 0; $(function(){ $(window).bind("sc

女爷i/ 2022年08月07日 03:41/ 0 赞/ 273 阅读

相关 jquery滚动条加载数据

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

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

相关 Jquery无限滚动加载插件

$(document).endlessScroll({ fireOnce: false, fireDelay: false,

╰+哭是因爲堅強的太久メ/ 2022年06月17日 13:07/ 0 赞/ 405 阅读

相关滚动加载

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果

比眉伴天荒/ 2022年05月28日 01:37/ 0 赞/ 279 阅读

相关滚动条滚动异步加载数据

<script type="text/javascript"> //获取列表中的原有内容 var content=document.get

待我称王封你为后i/ 2022年05月24日 07:15/ 0 赞/ 414 阅读

相关 jq+scroll滚动加载

一、 objHeight：滚动对象的实际高度； scrollHeight：滚动对象需要滚动的整个高度； scrollTop：滚动条所要滚动的高度占滚动对象整个需要

﹏ヽ暗。殇╰゛Y/ 2022年04月17日 03:11/ 0 赞/ 305 阅读

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

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

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