问题描述
我的文档高度为 11886,滚动到文档底部时的滚动位置为 9542。
当我滚动到文档底部时,我想运行一个函数,该函数将再次增加文档的大小并加载更多内容。然后我需要更新文档高度并允许用户继续向下滚动。
使用 Locomotive.js 滚动。 常量滚动正在创建滚动功能。
(function () {
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),smooth: true,class: 'aos-animate',});
$(window).on("load",function () {
scroll.update();
});
let height = $(document).height();
console.log(height);
scroll.on('scroll',(position) => {
// let scroll_position = position.scroll.y;
// console.log(scroll_position);
const pageHeight = $('body').height() - $(window).height();
let scrollPos = position.scroll.y;
let scrollPercentage = (scrollPos * 100) / pageHeight;
let finalPercentage = Math.ceil(scrollPercentage);
console.log(finalPercentage);
if(finalPercentage == 100) {
setTimeout(() => {
my_repeater_show_more();
scroll.update();
$('.mouse-follow').each(function (index,el) {
var html = $(this).data('content');
$(el).mousefollow({
html: html,className: 'js-follow',});
});
},1000);
}
})
})
})();
解决方法
在查看您的代码时,您似乎正在尝试计算相对于总页面高度的滚动位置百分比。然后当该百分比达到100%时,调用加载更多内容的方法;无限滚动效果。
尝试使用滚动事件侦听器上的 document.documentElement
属性来获取 scrollTop,scrollHeight,clientHeight
值。
尝试使用它来计算滚动事件侦听器中的百分比:
const {scrollTop,clientHeight} = document.documentElement;
const finalPercentage = Math.round((scrollTop + clientHeight) / scrollHeight * 100);
下面的代码段是一个示例,展示了如何在 finalPercentage
达到 100 时生成新页面。
const qs = selector => document.querySelector(selector);
const height = Math.round(document.documentElement.clientHeight / 2);
const width = Math.round(document.documentElement.clientWidth / 3) - 15;
let currentPage = 1;
function addPage() {
const pageContent = document.createElement(`div`);
for (var i = 0; i < 12; i++) {
pageContent.innerHTML += `
<img src="https://via.placeholder.com/${width}x${height}.png?text=Page ${currentPage}">`;
}
pageContent.innerHTML += `<hr>`
qs(`main`).appendChild(pageContent);
}
window.addEventListener("scroll",() => {
const {scrollTop,clientHeight} = document.documentElement;
const finalPercentage = Math.round((scrollTop + clientHeight) / scrollHeight * 100);
if (finalPercentage == 100) {
currentPage++;
addPage();
}
},{ passive: true });
addPage();
<main />