带缓存的分页/无限滚动选型：长表格加载与位置恢复需求咨询

Hey there! Let’s work through your problem—you’ve got two key things to figure out: choosing between pagination and infinite scroll for your long table, and making sure users land right back where they left off when returning to the page. Let’s break this down step by step.

First, let’s align the two options with your requirements (initial 50 records, load more when scrolling near the last 10 entries):

• Infinite Scroll is a natural match for your scroll-triggered loading flow. It keeps users in a continuous browsing experience without forcing them to click "Next Page"—perfect if your users are primarily scrolling through records sequentially (e.g., reviewing logs, browsing a dataset).
  Caveats: It can make it hard to jump to a specific set of records, and too many loaded rows might slow down the page if you don’t optimize DOM size. You can mitigate this by adding a "Back to Top" button and displaying a running count of loaded records (e.g., "Showing 1-100 of 5,000 total").

• Pagination is better if your users need to jump directly to a specific batch of data (e.g., "Go to page 5") or frequently reference earlier sets of records. However, it doesn’t natively support the "scroll to load" behavior you want—you’d have to hack in scroll triggers, which defeats the purpose of pagination’s structured navigation.

My Recommendation: Go with infinite scroll for your initial design, since it directly aligns with your scroll-triggered loading requirement. If you later find users need to jump to specific sections, you can add a secondary "jump to record range" feature on top of it.

To make sure users return to their last scroll position (whether via browser back button or direct links/bookmarks), you’ll need to save and reload two key pieces of state:

1. How many records have been loaded so far
2. The current scroll position of the page

Option 1: For Browser Back Button (Simple, Session-Based) #

Use sessionStorage to save state during the user’s session. This works seamlessly for back/forward navigation, and clears when the browser tab closes.

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  const savedState = JSON.parse(sessionStorage.getItem('tableScrollState'));
  
  if (savedState) {
    // Load all records that were previously loaded
    loadRecords(savedState.loadedCount).then(() => {
      // Scroll to the saved position
      window.scrollTo(0, savedState.scrollTop);
    });
  } else {
    // First load: fetch initial 50 records
    loadRecords(50);
  }
});

// Scroll listener to trigger loading and save state
window.addEventListener('scroll', () => {
  const table = document.getElementById('your-long-table');
  const lastRow = table.querySelector('tr:last-child');
  const lastRowPosition = lastRow.getBoundingClientRect().top;
  const windowHeight = window.innerHeight;

  // Adjust this value based on your row height (e.g., 10 rows × 30px = 300px)
  const triggerOffset = 300;

  // Check if we're within 10 rows of the bottom
  if (lastRowPosition - windowHeight < triggerOffset) {
    const savedState = JSON.parse(sessionStorage.getItem('tableScrollState'));
    const nextLoadCount = (savedState?.loadedCount || 50) + 50;
    
    loadRecords(nextLoadCount).then(() => {
      saveScrollState(nextLoadCount, window.scrollY);
    });
  } else {
    // Save state on every scroll to keep it updated
    const savedState = JSON.parse(sessionStorage.getItem('tableScrollState'));
    saveScrollState(savedState?.loadedCount || 50, window.scrollY);
  }
});

// Helper: Save state to sessionStorage
function saveScrollState(loadedCount, scrollTop) {
  sessionStorage.setItem('tableScrollState', JSON.stringify({
    loadedCount,
    scrollTop
  }));
}

// Helper: Simulate your AJAX record load (replace with your actual API call)
function loadRecords(count) {
  return new Promise((resolve) => {
    // Example API call:
    // fetch(`/api/records?limit=${count}`)
    //   .then(res => res.json())
    //   .then(data => {
    //     // Append/replace rows in your table here
    //     resolve();
    //   });
    
    // Simulate loading delay for demo
    setTimeout(() => {
      console.log(`Loaded ${count} records`);
      resolve();
    }, 500);
  });
}

Option 2: For Any Access Scenario (Bookmarks, Direct Links) #

If you want users to land on their last position even when opening a bookmark or direct URL, save state to the URL’s query parameters instead of sessionStorage. This makes the state shareable and persistent across sessions.

// Helper: Get URL query parameter
function getUrlParam(key) {
  const params = new URLSearchParams(window.location.search);
  return params.get(key);
}

// Helper: Update URL query parameter without reloading
function setUrlParam(key, value) {
  const params = new URLSearchParams(window.location.search);
  params.set(key, value);
  window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  const loadedCount = parseInt(getUrlParam('loaded')) || 50;
  const scrollTop = parseInt(getUrlParam('scroll')) || 0;
  
  loadRecords(loadedCount).then(() => {
    window.scrollTo(0, scrollTop);
  });
});

// Scroll listener to trigger loading and update URL
window.addEventListener('scroll', () => {
  const table = document.getElementById('your-long-table');
  const lastRow = table.querySelector('tr:last-child');
  const lastRowPosition = lastRow.getBoundingClientRect().top;
  const windowHeight = window.innerHeight;
  const triggerOffset = 300; // Adjust based on row height

  if (lastRowPosition - windowHeight < triggerOffset) {
    const currentLoaded = parseInt(getUrlParam('loaded')) || 50;
    const nextLoadCount = currentLoaded + 50;
    
    loadRecords(nextLoadCount).then(() => {
      setUrlParam('loaded', nextLoadCount);
      setUrlParam('scroll', window.scrollY);
    });
  } else {
    const currentLoaded = parseInt(getUrlParam('loaded')) || 50;
    setUrlParam('loaded', currentLoaded);
    setUrlParam('scroll', window.scrollY);
  }
});

// Reuse the loadRecords() function from Option 1 here

Key Optimizations to Keep in Mind #

• Dynamic Trigger Calculation: If your rows have variable heights, instead of a fixed pixel offset, find the 10th-to-last row in your table and check if it’s entered the viewport.
• DOM Performance: If you’re loading thousands of records, consider virtual scrolling (only render rows that are visible in the viewport) to avoid page lag. Alternatively, unload rows that are far above/below the viewport and reload them if the user scrolls back.
• Loading Feedback: Add a "Loading..." indicator at the bottom of the table to let users know more records are on the way, and prevent duplicate load triggers.

内容的提问来源于stack exchange，提问作者S R