如何停止无限滚动加载在页面顶部？

Question

如何停止无限滚动加载在页面顶部？

javascripthtmlcssinfinite-scroll

4

当无限滚动接近页面底部时，它会返回页面顶部并进行刷新。

我该如何停止这种行为，使其加载新的图片与先前的图片一起，并防止它返回到页面顶部并刷新？

我不希望在收藏夹部分实现无限滚动，只在内容显示部分实现。

感谢任何帮助，谢谢。

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();

- user8

1

没有提供最小可复现示例很难回答这个问题，但是window.scrollTo({ top: 0, behavior: 'instant'});看起来有问题。删除它可能会解决滚动到顶部的问题。 - Steve

@Steve 你好，我已经尝试过删除它，但是它没有起作用。我还包含了一个jsfiddle。非常感谢任何帮助，谢谢 :)。 - user8

你的 JSFiddle 有错别字，并且甚至没有展示问题。 - zenly

请将此代码/问题缩短。 - tenshi

JsFiddle对我来说甚至都无法工作，它只是一个白色背景。 - Asher Memon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bar · Answer 1

问题出在你代码的两行。首先，正如注释中所指出的那样，

window.scrollTo({ top: 0, behavior: 'instant'});

是将页面滚动到顶部的内容，您应该将其删除。另一个问题在获取逻辑中：

resultsArray = await response.json();

删除整个列表的内容，并用新记录替换它！这意味着在加载更多数据时，您不会将新数据添加到已获取的记录中，而是用新数据替换当前数据。

可能的解决方案：

const newResultsArray = await response.json();
resultsArray = resultsArray.concat(newResultsArray); // Combine new and already-fetched records

我更改了jsfiddle中的这两行代码，并使用模拟数据进行了测试（因为API出现错误）。对我来说，它起作用了。