2014-09-19 87 views
0

我正在尝试对页面进行无限滚动,但测试页面底部的条件是否在Chrome上无法正常运行。在Chrome上,此警报似乎触发在页面的顶部,而不是触及底部。它在IE11上正常工作。要在页面上检测页面底部的JavaScript是否相反

在Chrome $(document).height()等于0.我的页面顶部有一个<!DOCTYPE html> html,如果它很重要的话。

奇怪的是我把这个从另一个例子它的工作完美的jsfiddle内的浏览器:http://jsfiddle.net/nick_craver/gWD66/

$(window).scroll(function() { 
     if ($(window).scrollTop() + $(window).height() == $(document).height()) { 
      alert("test"); 
     } 
    } 
} 
+2

你可以发布你的整个页面吗? – Max 2014-09-19 20:57:05

+0

不幸的是我必须保持私密。 – 2014-09-19 20:59:25

+1

对我来说(在Chrome中)它完美的工作,这代码究竟是什么问题? – algorhythm 2014-09-19 21:04:26

回答

0

以下功能似乎提供了最终的失败证明的解决方案获得页面的正确的高度,至少在我的情况。

function getDocHeight() { 
    var doc = document; 
    return Math.max(
     Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight), 
     Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight), 
     Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) 
    ); 
} 
1

什么样的CSS应用到网页,更使体内元素?这可能是使$(document).height()等于比$(window).scrollTop()和$(window).height()的组合更多的一些填充或边距。以下代码将帮助您确定您是否真的符合if()条件。

你使用的是什么版本的jQuery?

$(window).scroll(function() { 
 
    var scrollPosition = $(window).scrollTop() + $(window).height(); 
 
    var bodyHeight = $(document).height(); 
 
    $("#scrollIndex").html(scrollPosition + "/" + bodyHeight); 
 
    if(scrollPosition == bodyHeight) { 
 
     $("#scrollIndex").html("BOTTOM!"); 
 
     $('body').height(bodyHeight + 200 + "px"); 
 
    } 
 
});
body{ 
 
\t height:2000px; 
 
} 
 
#scrollIndex{ 
 
\t position:fixed; 
 
    \t top:0px; 
 
    \t right:0px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id='scrollIndex'></div>

+0

这很有帮助,谢谢! – 2014-09-22 18:40:41