Javascript 在 div 内无限滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23961566/
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
Javascript Infinite Scroll inside a div
提问by Jacob
I am trying to create an infinite loading page with the use of javascript. I found this: How to do infinite scrolling with javascript only without jquery
我正在尝试使用 javascript 创建一个无限加载页面。我发现了这个：如何在没有 jquery 的情况下使用 javascript 进行无限滚动
I have been playing with the last answer that links to this jsfiddle page: http://jsfiddle.net/8LpFR/
我一直在玩链接到这个 jsfiddle 页面的最后一个答案：http: //jsfiddle.net/8LpFR/
document.addEventListener("scroll", function (event) {
checkForNewDiv();
});
var checkForNewDiv = function () {
var lastDiv = document.querySelector("#scroll-content > div:last-child");
var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
var pageOffset = window.pageYOffset + window.innerHeight;
if (pageOffset > lastDivOffset - 10) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "my awesome new div";
document.getElementById("scroll-content").appendChild(newDiv);
checkForNewDiv();
}
};
checkForNewDiv();
How would I modify that in order to make the scrolling work inside a div rather than as the whole page? As in, what would lastDivOffset and pageoffset change to?
我将如何修改它以使滚动在 div 内而不是整个页面内工作？比如，lastDivOffset 和 pageoffset 会变成什么？
采纳答案by Suresh Ponnukalai
Here is the solution without creating any new wrapper division.
这是不创建任何新包装器部门的解决方案。
document.getElementById("scroll-content").addEventListener("scroll", function(event) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "my awesome new div";
document.getElementById("scroll-content").appendChild(newDiv);
});
var checkForNewDiv = function() {
var lastDiv = document.querySelector("#scroll-content > div:last-child");
var maindiv = document.querySelector("#scroll-content");
var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
var pageOffset = maindiv.offsetTop + maindiv.clientHeight;
if (pageOffset > lastDivOffset - 10) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "my awesome new div";
document.getElementById("scroll-content").appendChild(newDiv);
checkForNewDiv();
}
};
checkForNewDiv();
回答by TheRealChx101
Simplest of them all.
其中最简单的。
var scrollY = container.scrollHeight - container.scrollTop;
var height = container.offsetHeight;
var offset = height - scrollY;
if (offset == 0 || offset == 1) {
// load more content here
}
回答by LcSalazar
Wrap it within a div with overflow:autoand position:relative, so it will act as the body.
Also remember to specify a height.
用overflow:autoand将它包裹在一个 div 中position:relative，这样它就会充当主体。还要记住指定高度。
#wrapper {
position: relative;
overflow: auto;
width: 300px;
height: 300px;
}
Then, you must change the JS references that pointed to body or window, to the new wrapper div:
然后，您必须将指向 body 或 window 的 JS 引用更改为新的包装器 div：
var wrapper = document.getElementById("wrapper");
wrapper.addEventListener("scroll", function (event) {
checkForNewDiv();
});
var checkForNewDiv = function () {
var lastDiv = document.querySelector("#scroll-content > div:last-child");
var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
var pageOffset = wrapper.scrollTop + wrapper.clientHeight;
//NOTE THAT PROPERTIES NAME ALSO CHANGED A BIT, FOR EXAMPLE:
// pageYOffset -> scrollTop and innerHeight -> clientHeight
if (pageOffset > lastDivOffset - 10) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "my awesome new div";
document.getElementById("scroll-content").appendChild(newDiv);
checkForNewDiv();
}
};
checkForNewDiv();
Here's the working fiddle: http://jsfiddle.net/8LpFR/1/
这是工作小提琴：http: //jsfiddle.net/8LpFR/1/
