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

应该说这个例子可以很简单，也可以直接用jQuery方法处理。但是，本文的底部使用了原始的js，可以分析和获取一些小的知识点。

原理很简单，就是在窗口中添加一个滚动事件，每次浏览器触发滚动事件时，判断是否已经滚动到浏览器底部，如果到达底部，加载新的数据。关键是计算滚动条是否滚动到浏览器底部。算法如下。

滚动条高度窗口高度文档总高度50/*我这里将滚动响应区域的高度取为50px */这里；如果该判断为真，则表示滚动条已经滚动到底部。

例子

style type='text/css' html，body，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，code，form，fieldset，legend，input，button，textarea，p，blockquote，th，TD { margin 3360 0 0；划水：0；} *{ -webkit-box-sizing:边框-box；-moz-box-siz :边框盒；盒子尺寸：边框盒子；} .water fllow-loading { z-index : 2000；display:none} .water fllow-loading . active { display : block；} .water fllow-loading img . loading-progress { position :固定；/*在窗口中间水平设置等待栏*/margin-left : auto；右边距：自动；left : 0；right : 0；/*不能设置margin-top:auto和margin-bottom:auto，否则在IE */bottom: 30px下不会使用bottom}/style div class=' water fllow-loading ' img class=' loading-progress ' src=' http : busy . gif '/div script type=' text/JavaScript '/在图片查询中，浏览器的主页面正在滚动(瀑布流)。您只能使用窗口绑定，但文档绑定不起作用。$(窗口)。on ('scroll '，function(){ if(scroll top())window height()=(document height()-50/* scroll响应区域高度为50px */){ waterowdata()；} });函数waterallowData(){ $(')。水流加载)。add CLaSS(' active ')；/* $ .ajax ({url:url，type:' post '，data: params，success3360函数(数据，文本状态，jqxhr){//添加数据.//隐藏加载栏$('。water fllow-loading . active’)。} });*/}获取页面顶部的卷起高度功能。

//获取页面函数scrolltop()顶部的滚动高度{ return math . max(//chrome document . body . scroll top，//Firefox/iedocument . document element . scroll top)；}chrome浏览器和Firefox/IE对滚动条属于body还是html的理解不同，导致处理方式不同。

获取页面文档的总高度。

//获取页面总高度文档函数documentHeight(){ //现代浏览器(IE9等浏览器)和IE8的document.body.scrollHeight和document . document element . scroll height可以返回math . max(document . body . scroll height，document . document element . scroll height)；}该算法与jQuery计算文档高度的方法一致。

获取页面浏览器视口的高度。

函数windowHeight(){ return(document.compat mode==' css1 compat ')？document . document element . client height : document . body . client height；}这里需要说明的是文档.compatMode很奇怪，好像我一般都没遇到过。

document.compatMode有两个值，“BackCompat”和“CSS1Compat”。官方解释是BackCompat:关闭标准兼容模式。CSS1Compat:标准兼容模式开启。工业工程对盒子模型的渲染在标准模式和怪癖模式之间有很大的不同。标准模式中的盒子模型的解释与其他标准浏览器中的解释相同，但在怪癖模式中有很大不同。在不声明Doctype的情况下，IE默认为Quirks模式。举个例子说明这两种模式的区别。

当document.compatMode等于“BackCompat”时，浏览器客户端区域的宽度为document . body . client width；

当document.compatMode等于CSS1Compat时，浏览器客户端区域的宽度为document . document element . client width。

还有其他属性类似。这里不说了，但是我们可以预见两种模式导致工业管理学(工业工程)渲染的基石都更改了，可想而知构建出来的建筑物差别当有多大。

所以请为每一个页面声明文档类型不仅仅是一个好习惯，而且是一个必要的处理怪癖模式可以进垃圾堆了。

好了下面附上完整的代码，有一个小例子（没有后台刷数据，只是显示等待条)

！DOCTYPE html html lang=' ch-cn ' hearta charset=' utf-8 '脚本类型=' text/JAVAScript ' src=' jquery-1。9 .1 .js /脚本样式类型='text/css' html，body，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，code，form，fieldset，legend，input，button，textarea，p，blockquote，th，td{ margin333划水：0;} * {-web kit-box-siz :边框-盒子；-moz-box-siz :边框盒；盒子尺寸：边框盒子；} .水低负荷{ z指数： 2000；display:none}。水流量负载。活动{显示：块；} .水流量负载img。装载进度{位置：固定；/*设置等待条水平居于窗口正中*/margin-left : auto；右边距：自动；左： 0；右： 0；/*不能设置页边距-top:auto和边距-底部：auto否则工业管理学(工业工程)下底部就不顶用了*/底部： 30px}/style/head body style=' background : # ff0；'height :1000 px ' div class=' water fllow-loading ' img class=' loading-progress ' src=' http : busy。gif '/div/body脚本类型=' text/JavaScript '//获取页面顶部被卷起来的高度函数滚动顶部(){返回数学。max(//chrome文档。尸体。滚动顶部，//Firefox/IE文档。文档元素。滚动顶部)；} //获取页面文档的总高度函数documentHeight(){ //现代浏览器(IE9和其他浏览器)和IE8的document.body.scrollHeight和文件。文档元素。滚动高度都可以返回数学。max(文档。尸体。滚动高度，文档。文档元素。滚动高度)；} //获取页面浏览器视口的高度函数窗口高度(){//文档。兼容模式有两个取值背景公司：标准兼容模式关闭css1公司：标准兼容模式开启。返回(文档。compat mode==' css1 compat ')？文件。文档元素。客户端高度：文档。尸体。客户身高；}/脚本脚本类型='text/javascript' //图片查询中正对浏览器主页面滚动事件处理（瀑布流)。只能使用窗户方式绑定，使用文件方式不起作用$(窗口)。on('scroll '，function(){ if(scroll top())窗口高度()=(文档高度()-50/*滚动响应区域高度取50px */)){ waterallowData()；} });函数waterallowData(){ $(').水流加载)。添加CLaSS(' active ')；/*$.ajax({ url:url，type:'post '，data: params，success:function(data，textStatus，jQXHR){ //添加数据.//隐藏加载条$('.水流量负载。活动').移除CLaSS(' active ')；} });*/}/脚本/html里面的加载条图片为

以上就是滚动条滚动到页面底部继续加载的处理实例，希望对大家的学习有所帮助。