У меня есть код, над которым я работаю, чтобы добавить бесконечную прокрутку в блог, и я застрял.Это вроде работает, но перестает прокручиваться после добавления всего нескольких элементов div на мобильные устройства.Я создал 16 текстовых файлов в том же каталоге с именами от 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>