手机端页面滑动到底部加载信息

//滚动加载
function scroll_load(){
    var scrollBottom; //网页正文全文高-滚动条距离顶部的高度
    
    $(document).scroll(function(){//滚动事件
          scrollBottom = document.body.scrollHeight - document.body.scrollTop;
          if(scrollBottom == document.body.clientHeight|| scrollBottom <= (document.body.clientHeight+10)){

//scrollBottom是否等于网页可见区域高,如果相等则执行下面代码

if(pageCount == (currentPage+1)){//判断总页数是否等于当前页码+1,如果相等则执行下面代码
                      $(".click-load").hide();
                      return;
                  }
              
                currentPage++;//当前页码加1
                showList(currentPage,pageSize);     //访问的服务器的分页接口,请求数据          
            }
    });
}

顺便写一下常用的高度:

Javascript:

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽

Jquery

alert($(window).height());                           //浏览器当前窗口可视区域高度

alert($(document).height());                        //浏览器当前窗口文档的高度

alert($(document.body).height());                //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width());                            //浏览器当前窗口可视区域宽度

alert($(document).width());                        //浏览器当前窗口文档对象宽度

alert($(document.body).width());                //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

时间: 2024-08-13 01:02:07

手机端页面滑动到底部加载信息的相关文章

HTML5手机端手指滑动上拉加载代码

在线预览   源码下载 HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发.该特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

页面滚动条滑动至底部加载信息

$(window).scroll(function(){   var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度  var scrollHeight = $(document).height();   //当前页面的总高度  var clientHeight = $(this).height();    //当前可视的页面高度  // console.log("top:"+scrollTop+",doc:"+sc

手机端和PC端分别加载不同的js文件

分手机端和PC端其实方法很多,我们在响应式设计.响应式网站建设中经常碰到此类需求.下面说说我们在项目中遇到的需求: 手机端和PC端分别加载不同的js客服代码(注意:是要在PC和手机端分别加载不同的js文件) 第一种方法(简单型): <script type="text/javascript"> // 根据屏幕尺寸 if (screen && screen.width > 480) { document.write('<script type=&q

滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn"> <meta charset="utf-8" /> <title>滚动加载|jquery.endless-scroll插件|使用demo</title> <script type="text/javascript"

74.手机端图片瀑布流的加载代码和效果

http://www.bin012.com/index.php?route=product/product&path=63&product_id=52 原文地址:https://www.cnblogs.com/sqyambition/p/11022935.html

Django+ajax实现页面底部加载

Django+ajax实现页面底部加载 需求:展示图片,当滚动条拖到页面底部时加载一部分图画. 问题:photo的展示使用的是django的QuerySet,对于ajax如何加载非常头痛,还专门补了一下js. 解决思路:用的取巧的办法,把photo先分页,然后ajax的load方法加载下一个页面的photo部分到当前页面来. 分页 第一步是把photo的QuerySet分页展示,我这里直接用127.0.0.1:8000/x/的url,所以在urls.py里这样写 url(r'^(?P<page>

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 [JavaScript] 纯文本查看 复制代码

yii2 如何在页面底部加载css和js

作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 正所谓命由己造,相由心生,那么我们的问题又是怎么抛出来的喃? 这个问题也算是个比较久远但是经常会有人要问到的问题.究其原因, 一来实际开发中不可避免,二来也就是刚接触yii的小伙伴喜欢揪着不放.那 为啥了解过这个问题的人就不纠结了喃?外星人:楼主你si不si撒,人家都

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数