当无限滚动接近页面底部时,它会返回页面顶部并进行刷新。
我该如何停止这种行为,使其加载新的图片与先前的图片一起,并防止它返回到页面顶部并刷新?
我不希望在收藏夹部分实现无限滚动,只在内容显示部分实现。
感谢任何帮助,谢谢。
const resultsNav = document.getElementById('resultsNav');
const favouritesNav = document.getElementById('favouritesNav');
const imagesContainer = document.querySelector('.images-container');
const saveConfirmed = document.querySelector('.save-confirmed');
const loader = document.querySelector('.loader');
// Unsplash API
const count = 10;
const apiKey = 'UNSPLASH_API_KEY';
const apiUrl = `https://api.unsplash.com/photos/random?client_id=${apiKey}&count=${count}`;
let resultsArray = [];
let favourites = {};
function showContent(page) {
window.scrollTo({ top: 0, behavior: 'instant'});
if (page === 'results') {
resultsNav.classList.remove('hidden');
favouritesNav.classList.add('hidden');
} else {
resultsNav.classList.add('hidden');
favouritesNav.classList.remove('hidden');
}
loader.classList.add('hidden');
}
function createDOMNodes(page) {
const currentArray = page === 'results' ? resultsArray : Object.values(favourites);
currentArray.forEach((result) => {
// Card Container
const card = document.createElement('div');
card.classList.add('card');
// link
const link = document.createElement('a');
link.href = result.links.html;
link.target = '_blank';
//Images
const image = document.createElement('img');
image.src = result.urls.regular;
image.alt = 'Image';
image.loading = 'lazy';
image.classList.add('card-img-top');
//Card Body
const cardBody = document.createElement('div');
cardBody.classList.add('card-body');
// Save Text
const saveText = document.createElement('p');
saveText.classList.add('clickable');
if (page === 'results') {
saveText.textContent = 'Add To Favourites';
saveText.setAttribute('onclick', `saveFavourite('${result.urls.regular}')`);
} else {
saveText.textContent = 'Remove Favourite';
saveText.setAttribute('onclick', `removeFavourite('${result.urls.regular}')`);
}
// Append
cardBody.append(saveText);
link.appendChild(image);
card.append(link, cardBody);
imagesContainer.appendChild(card);
});
}
function updateDOM(page) {
// Get Favourites from localStorage
if (localStorage.getItem('unsplashFavourites')) {
favourites = JSON.parse(localStorage.getItem('unsplashFavourites'));
}
imagesContainer.textContent = '';
createDOMNodes(page);
showContent(page);
}
// Get 10 Images from Unsplash API
async function getUnplashPictures() {
// Show loader
loader.classList.remove('hidden');
try {
const response = await fetch(apiUrl);
resultsArray = await response.json();
updateDOM('results');
} catch (error) {
// Catch Error Here
}
}
// Add result to Favourites
function saveFavourite(itemUrl) {
// Loop through Reuslts Array to select Favourite
resultsArray.forEach((item) => {
if (item.urls.regular.includes(itemUrl) && !favourites[itemUrl]) {
favourites[itemUrl] =item;
// Show Save Confirmation for 2 Seconds
saveConfirmed.hidden = false;
setTimeout(() => {
saveConfirmed.hidden = true;
}, 2000);
// Set Favourites in localStorage
localStorage.setItem('unsplashFavourites', JSON.stringify(favourites));
}
});
}
// Remove item from Favourites
function removeFavourite(itemUrl) {
if (favourites[itemUrl]) {
delete favourites[itemUrl];
// Set Favourites in localStorage
localStorage.setItem('unsplashFavourites', JSON.stringify(favourites));
updateDOM('favourites');
}
}
// Check to see if scrolling near bottom of page, Load More Photos
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000) {
getUnplashPictures();
}
});
// On Load
getUnplashPictures();
window.scrollTo({ top: 0, behavior: 'instant'});
看起来有问题。删除它可能会解决滚动到顶部的问题。 - Steve