沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！

在懂得下面的常识点之前，笔者这里先介绍几个概念。

• $(window).height(); //用于获取浏览器显示区域的高度
• $(window).width(); //用于获取浏览器显示区域的宽度
• $(document.body).height(); //获取页面文档的高度
• $(document.body).width(); //获取页面文档的宽度
• $(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离
• $(document).scrollLeft(); //获取程度滚动条到左边的程度距离

有些需求中，须要当用户滚动到浏览器底部的时刻，再加载新的内容。笔者在这里介绍若何应用Jquery断定用户是否已经浏览到网页的底部了。

经由过程膳绫擎的常识点，可以知道：浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。

$(window).scroll(function(){ 
                var h=$(document.body).height();//网页文档的高度 
                var c = $(document).scrollTop();//滚动条距离网页顶部的高度 
                var wh = $(window).height(); //页面可视化区域高度 
 
                if (Math.ceil(wh+c)>=h){ 
                    alert("我已经到底部啦"); 
                } 
            })  

如不雅须要断定用户是否已经浏览到某个元素的话，那么只须要把膳绫擎的网页文档高度，换成某一个元素距离网页顶部的距离就可以了。例如：

$(window).scroll(function(){ 
                var h=$("#div").offset().top;//id为div的元素距离网页顶部的距离 
                var c = $(document).scrollTop();//滚动条距离网页顶部的高度 
                var wh = $(window).height(); //页面可视化区域高度 
 
                if (Math.ceil(wh+c)>=h){ 
                    alert("我已经到底部啦"); 
                } 
            })  

在这里读者须要留意，断定前提中，wh+c取得是知足大年夜于等于该数字的最小整数。经由笔者的测试，在IE7、8、9、11上都没有问题。

接下来笔者把膳绫擎的代码封装为一个插件。

(function ($) { 
        //backcall是回调函数，count表示回调函数被履行的次数，count只有元素在屏幕范围之外的时刻才起感化 
    $.fn.inBottom = function (backcall){ 
        //断定当前元素是否在今朝屏幕可视化区域之内 	
			
 1/2    1 2 下一页 尾页
	
			

　　推荐阅读
　　沟通为王：安全人员必备的软技能
            沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！
            Tripwire产品治理及策略副总裁蒂姆·厄林称：“收集安然行业不该忽视打造强力安然项目所需的软技>>>详细阅读


本文标题：如何判断网页是否已经滚动到浏览器底部了
地址：http://www.17bianji.com/lsqh/38211.html
 1/2    1