javascript - html javascript中的无限滚动

问题描述

我有这段代码一直在为博客添加无限滚动，但我被卡住了。它有点工作，但在移动设备上添加几个 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 的内容和目录布局的图像：

<!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>

标签： javascriptjqueryhtml

javascript - html javascript中的无限滚动

问题描述

解决方案

推荐阅读