我有这段代码，我一直在努力为博客添加无限滚动，但我被卡住了。它有点工作，但它在移动设备上添加几个 div 元素后停止滚动。我在同一个目录下创建了16个txt文件，分别命名为0.txt到15.txt，并在每个文件中添加了以下内容...
文本文件的内容:
<div class="card">
<h2 class="post">TITLE HEADING 1</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="tempimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>但是还是有些不对。有人可以帮我想出更好的方法吗？我仍然需要从外部文件加载文章的能力，我更愿意只使用 html 和 javascript 来完成它，因为我也不太喜欢 jquery 插件。
index.html 和 Image of directory layout 的内容:
<!DOCTYPE html><html lang="en"><head><title>scrolling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.page {height: 80%;border:solid 5px #ccc}
</style>
</head>
<body>
<div id="scrollcontent">
<div id="page" class="page"></div>
</div>
<script>
//########################
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
var nextcount = "2";
var NextArticle = "2.html";
$.get("0.txt", function (data) {
$("#page").append(data);
});
$.get("1.txt", function (data) {
$("#page").append(data);
});
$.get("2.txt", function (data) {
$("#page").append(data);
});
document.addEventListener("scroll", function (event) {
if (getDocHeight() == getScrollXY()[1] + window.innerHeight)
{
nextcount++;
NextArticle = nextcount + ".txt";
var oldcontent = document.getElementById('scrollcontent');
//oldcontent.innerHTML = oldcontent.innerHTML + '<div class="page">new content loaded</div>';
$.get(NextArticle, function (data) {
$("#page").append(data);
});
document.getElementById("scrollcontent").innerHTML=oldcontent.innerHTML;
}
});
</script>
</body>
</html>最佳答案
尝试使用 https://infinite-scroll.com图书馆。 他们有自己的文档，您可以通读。
关于javascript - html javascript中的无限滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58116649/