Javascript 如何确定垂直滚动条是否已到达网页底部?
jQUery也回答了同样的问题,但我正在寻找没有jQUery的解决方案。 我想知道如何确定垂直滚动条是否已到达网页底部。 我使用的是Javascript 如何确定垂直滚动条是否已到达网页底部?,javascript,window,scrollbar,Javascript,Window,Scrollbar,jQUery也回答了同样的问题,但我正在寻找没有jQUery的解决方案。 我想知道如何确定垂直滚动条是否已到达网页底部。 我使用的是Firefox3.6 我编写了简单的Javascript循环,向下滚动200像素,当滚动条到达页面底部时,我想停止循环 问题是scrollHeight()正在返回1989。 内部循环scrollTop每次迭代递增200 200 ==> 400 ==> 600 .... 1715 从1715年开始,它不会增加,所以这个循环会一直持续下去 看起来scro
Firefox3.6
我编写了简单的Javascript循环,向下滚动200像素,当滚动条到达页面底部时,我想停止循环
问题是scrollHeight()正在返回1989。
内部循环scrollTop
每次迭代递增200
200 ==> 400 ==> 600 .... 1715
从1715年开始,它不会增加,所以这个循环会一直持续下去
看起来scrollHeight()和scrollTop()不是比较以确定滚动条实际位置的正确方法?我如何知道循环何时停止
代码:
var curWindow = selenium.browserbot.getCurrentWindow();
var scrollTop = curWindow.document.body.scrollTop;
alert('scrollHeight==>' + curWindow.document.body.scrollHeight);
while(curWindow.document.body.scrollHeight > curWindow.document.body.scrollTop) {
scrollTop = curWindow.document.body.scrollTop;
if(scrollTop == 0) {
if(window.pageYOffset) { //firefox
alert('firefox');
scrollTop = window.pageYOffset;
}
else { //IE
alert('IE');
scrollTop = (curWindow.document.body.parentElement) ? curWindow.document.body.parentElement.scrollTop : 0;
}
} //end outer if
alert('current scrollTop ==> ' + scrollTop);
alert('take a shot here');
selenium.browserbot.getCurrentWindow().scrollBy(0,200);
} //end while
当你告诉一个元素滚动时,如果它的
scrollTop
(或任何适当的属性)没有改变,那么你不能假设它已经尽可能地滚动了吗
因此,您可以跟踪旧的scrollTop
,告诉它滚动一些,然后检查它是否真的这样做了:
function scroller() {
var old = someElem.scrollTop;
someElem.scrollTop += 200;
if (someElem.scrollTop > old) {
// we still have some scrolling to do...
} else {
// we have reached rock bottom
}
}
我刚刚通读了jQuery源代码,看起来您需要“pageYOffset”。然后可以得到窗口高度和文档高度 大概是这样的:
var yleftogo=document.height-(window.pageYOffset+window.innerHeight)代码>
如果yLeftToGo为0,则您处于底部。至少这是总的想法
function scrollHandler(theElement){
if((theElement.scrollHeight - theElement.scrollTop) + "px" == theElement.style.height)
alert("Bottom");
}
对于HTML元素(如div),添加事件--onscroll='scrollHandler(this).检查是否到达页面底部的正确方法如下:
获取document.body.clientHeight
=显示的实际屏幕高度
Getdocument.body.offsetHeight
或document.body.scrollHeight=显示的整个页面的高度
检查是否document.body.scrollTop
=document.body.scrollHeight-document.body.clientHeight
如果3为真,则到达页面底部
<span id="add"></add>
<script>
window.onscroll = scroll;
function scroll () {
if (window.pageYOffset + window.innerHeight >= document.body.scrollHeight - 100) {
document.getElementById("add").innerHTML += 'test<br />test<br />test<br />test<br />test<br />';
}
}
</script>
window.onscroll=滚动;
功能滚动条(){
if(window.pageYOffset+window.innerHeight>=document.body.scrollHeight-100){
document.getElementById(“add”).innerHTML+=“test
test
test
test
test
test
”;
}
}
以下是我用来支持无限滚动列表视图的一些代码:
var isBelowBuffer = false; // Flag to prevent actions from firing multiple times
$(window).scroll(function() {
// Anytime user scrolls to the bottom
if (isScrolledToBottom(30) === true) {
if (isBelowBuffer === false) {
// ... do something
}
isBelowBuffer = true;
} else {
isBelowBuffer = false;
}
});
function isScrolledToBottom(buffer) {
var pageHeight = document.body.scrollHeight;
// NOTE: IE and the other browsers handle scrollTop and pageYOffset differently
var pagePosition = document.body.offsetHeight + Math.max(parseInt(document.body.scrollTop), parseInt(window.pageYOffset - 1));
buffer = buffer || 0;
console.log(pagePosition + "px / " + (pageHeight) + "px");
return pagePosition >= (pageHeight - buffer);
}
我意识到大多数解决方案都是基于jQuery的,但是如果你想获得“无限滚动”效果,你仍然可以从他们那里得到帮助:祝你好运。注意,这对IE不太管用。我认为在IE中你可以做document.body.scrollTop或其他什么。如果你不关心旧的浏览器,window.pageYOffset在IE9中也能工作。是的,我想根据浏览器的不同,它们使用不同的属性名。但显然IE不如真正的浏览器准确=Dwindow.innerHeight
而不是document.body.clientHeight