Fix infinite scroll

This commit is contained in:
Will Miao
2025-03-20 17:31:56 +08:00
parent 607ab35cce
commit b11757c913
4 changed files with 16 additions and 26 deletions

View File

@@ -275,11 +275,7 @@ export function appendLoraCards(loras) {
loras.forEach(lora => {
const card = createLoraCard(lora);
if (sentinel) {
grid.insertBefore(card, sentinel);
} else {
grid.appendChild(card);
}
grid.appendChild(card);
});
}

View File

@@ -171,22 +171,6 @@ class RecipeManager {
const recipeCard = new RecipeCard(recipe, (recipe) => this.showRecipeDetails(recipe));
grid.appendChild(recipeCard.element);
});
// Add sentinel for infinite scroll if needed
if (this.pageState.hasMore) {
let sentinel = document.getElementById('scroll-sentinel');
if (!sentinel) {
sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
sentinel.style.height = '10px';
grid.appendChild(sentinel);
// Re-observe the sentinel if we have an observer
if (state && state.observer) {
state.observer.observe(sentinel);
}
}
}
}
showRecipeDetails(recipe) {

View File

@@ -65,10 +65,24 @@ export function initializeInfiniteScroll(pageType = 'loras') {
if (existingSentinel) {
state.observer.observe(existingSentinel);
} else {
// Create a wrapper div that will be placed after the grid
const sentinelWrapper = document.createElement('div');
sentinelWrapper.style.width = '100%';
sentinelWrapper.style.height = '10px';
sentinelWrapper.style.margin = '0';
sentinelWrapper.style.padding = '0';
// Create the actual sentinel element
const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
sentinel.style.height = '10px';
grid.appendChild(sentinel);
// Add the sentinel to the wrapper
sentinelWrapper.appendChild(sentinel);
// Insert the wrapper after the grid instead of inside it
grid.parentNode.insertBefore(sentinelWrapper, grid.nextSibling);
state.observer.observe(sentinel);
}
}

View File

@@ -1,4 +0,0 @@
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search...">
<button id="searchButton"><i class="fas fa-search"></i></button>
</div>