Jquery与HTML高度的问题:100%

Question

我有这个函数，当用户距离窗口底部500px时触发点击。

这一切都很好，除了当我把我的html和body在css中设置为height:100%。

这是'工作'脚本。

$(document).ready(function() {
    var timeout = '';
    $(window).scroll(function (e) { 
        var intBottomMargin = 500; 
        clearTimeout(timeout);
        //if less than intBottomMargin px from bottom 
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin) {
          timeout = setTimeout(function(){ 
                $("#next-paginav")[0].click(); 
          }, 300);
        }
    });
});

我如何使相同的脚本工作时，我的html和身体是100%的高度?

Answer 1

我认为你的计算是错误的:

if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin)

如果你的body/html是100%的高度，这意味着你将它设置为视口的高度。你以前有过浮动元素吗?这可能就是为什么你(以前)的高度计算工作

试试这个:

if ($(window).scrollTop() >= $(document).height() - intBottomMargin)

Answer 2

你正在滚动的不是window，因为body和html被设置为与窗口相同的大小，所以窗口没有溢出需要

的scollbar

滚动条是body的一部分，因为它有溢出内容。将滚动处理程序绑定到body，它就可以工作了

 var $scollEl=$('body').scroll(function (e) { 
        var intBottomMargin = 500; 
        clearTimeout(timeout);
        //if less than intBottomMargin px from bottom 
        if ($scollEl.scrollTop() >= $(document).height() - $scollEl.height() - intBottomMargin) {
          timeout = setTimeout(function(){ 
                $(".clicked").click(); 
          }, 300);
        }
    });
});

演示:http://jsfiddle.net/LnmsR/2/