Javascript 检测 Scroll 何时到达页面底部 [不使用 jQuery]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10059888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect when Scroll reaches the BOTTOM of the page [ without jQuery ]
提问by brendan
I want to alert something when the scroll reaches the BOTTOM of the page, like this:
当滚动到达页面底部时，我想发出警报，如下所示：
$(function(){
$(document).scroll(function() {
if($(document).scrollTop() == 0) alert("top");
})
})
But without jQuery, and alert when reaches the Bottom.
但是没有 jQuery，并且在到达底部时发出警报。
回答by brendan
document.addEventListener('scroll', function (event) {
if (document.body.scrollHeight ==
document.body.scrollTop +
window.innerHeight) {
alert("Bottom!");
}
});
JSFiddle here: http://jsfiddle.net/cSer6/
JSFiddle在这里：http: //jsfiddle.net/cSer6/
回答by Jozef Cechovsky
This is working for me in IE
这在 IE 中对我有用
document.onscroll = function() {
if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
{
alert('bottom');
}
}
回答by Dennis
回答by ampersand
if(window.addEventListener){
window.addEventListener('scroll',scroll)
}else if(window.attachEvent){
window.attachEvent('onscroll',scroll);
}
function scroll(ev){
var st = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
if(!st){
console.log('top');
}else if((st+document.documentElement.clientHeight)>=document.documentElement.scrollHeight ){
console.log('bottom');
}
}
example: http://jsfiddle.net/ampersand/AEnzJ/
示例：http: //jsfiddle.net/ampersand/AEnzJ/
tested with http://browserling.comin chrome 17/18, safari 5, ff 10/11.0, ie 7-9
在 chrome 17/18、safari 5、ff 10/11.0，即 7-9 中使用http://browserling.com进行测试
回答by Saxoier
function addEvent(node, type, callback) {
if('addEventListener' in node) {
node.addEventListener(type, callback, false);
} else {
node.attachEvent('on' + type, callback);
}
}
addEvent(window, 'scroll', (function() {
// https://developer.mozilla.org/en/DOM/window.scrollY#Notes
var stObj, stProp;
if('scrollY' in window) { // CSSOM:
// http://www.w3.org/TR/cssom-view/#extensions-to-the-window-interface
stObj = window;
stProp = 'scrollY';
} else if('pageYOffset' in window) { // CSSOM too
stObj = window;
stProp = 'pageYOffset';
} else {
stObj = document.documentElement.clientHeight ?
document.documentElement : document.body;
stProp = 'scrollTop';
}
var node = document.documentElement.clientHeight ?
document.documentElement :
document.body; // let's assume it is IE in quirks mode
var lastSt = -1;
return function(e) {
if(lastSt !== stObj[ stProp ] && // IE <= 8 fires twice
node.scrollHeight === stObj[ stProp ] + node.clientHeight) {
alert('bottom');
}
lastSt = stObj[ stProp ];
};
})());
It's successfully tested with Firefox 11, Chrome 17, IE 9 (X-UA-Compatible: 8, 7, 5) and Opera 11.60.
它已在 Firefox 11、Chrome 17、IE 9（X-UA 兼容：8、7、5）和 Opera 11.60 上成功测试。
