如何实现多个固定高度表格的自动滚动？已完成单个表格自动滚动

To adapt your single-table scroll function for multiple tables, we need to encapsulate state for each individual table (so their scroll behaviors don't interfere) and target all scrollable containers instead of a single ID. Here's a robust, scalable implementation:

Step 1: CSS Setup #

First, ensure your table containers have fixed height and proper overflow. Add this to your stylesheet:

.scrollable-table-div {
  height: 300px; /* Adjust to your desired fixed height */
  overflow: hidden; /* Hides scrollbar; use 'auto' if you want scrollbars visible */
  border: 1px solid #eee; /* Optional: for visual clarity */
}

Step 2: JavaScript Implementation #

Replace your original single-table code with this multi-table compatible version:

// Global configuration (adjust these values as needed)
const SCROLL_RATE = 50; // Milliseconds between scroll steps (lower = faster)
const SCROLL_STEP = 1; // Pixels to scroll per step
const PAUSE_DURATION = 1000; // Milliseconds to pause at top/bottom

// Track state for each scrollable table
let scrollInstances = [];

/**
 * Initialize auto-scrolling for all target table containers
 */
function initScrollableTables() {
  // Select all containers with our custom class
  const scrollableDivs = document.querySelectorAll('.scrollable-table-div');
  
  scrollableDivs.forEach(div => {
    // Skip if content is shorter than the container (no need to scroll)
    if (div.scrollHeight <= div.offsetHeight) return;
    
    // Create a state object for this container
    const instance = {
      element: div,
      previousScrollTop: 0,
      isScrollingDown: true,
      reachedBoundary: false,
      intervalId: null
    };
    
    // Start scrolling interval for this instance
    instance.intervalId = setInterval(() => scrollTable(instance), SCROLL_RATE);
    
    // Add to our tracking array
    scrollInstances.push(instance);
  });
}

/**
 * Handle scrolling logic for a single table instance
 * @param {Object} instance - State object for the table container
 */
function scrollTable(instance) {
  const { element, isScrollingDown, previousScrollTop, reachedBoundary } = instance;
  
  if (reachedBoundary) return; // Wait for pause to finish before switching direction
  
  if (isScrollingDown) {
    // Scroll down by step amount
    instance.previousScrollTop += SCROLL_STEP;
    element.scrollTop = instance.previousScrollTop;
    
    // Check if we've reached the bottom boundary
    const bottomBoundary = element.scrollHeight - element.offsetHeight;
    if (element.scrollTop >= bottomBoundary) {
      instance.reachedBoundary = true;
      // Pause then switch to scrolling up
      setTimeout(() => {
        instance.isScrollingDown = false;
        instance.reachedBoundary = false;
      }, PAUSE_DURATION);
    }
  } else {
    // Scroll up by step amount
    instance.previousScrollTop -= SCROLL_STEP;
    element.scrollTop = instance.previousScrollTop;
    
    // Check if we've reached the top boundary
    if (element.scrollTop <= 0) {
      instance.reachedBoundary = true;
      // Pause then switch to scrolling down
      setTimeout(() => {
        instance.isScrollingDown = true;
        instance.reachedBoundary = false;
      }, PAUSE_DURATION);
    }
  }
}

/**
 * Stop all auto-scrolling instances (useful for cleanup)
 */
function stopAllScrolls() {
  scrollInstances.forEach(instance => clearInterval(instance.intervalId));
  scrollInstances = [];
}

// Initialize scrolling when the page loads
window.addEventListener('load', initScrollableTables);

Step 3: HTML Usage #

Add the scrollable-table-div class to each table container:

<div class="scrollable-table-div">
  <table>
    <!-- Your table content here -->
  </table>
</div>

<div class="scrollable-table-div">
  <table>
    <!-- Another table's content here -->
  </table>
</div>

Key Improvements Over Your Original Code #

• Scalable: Works with any number of tables (just add the class to their containers)
• Isolated State: Each table has its own scroll state, so they don't interfere with each other
• Continuous Loop: Scrolls down to the bottom, pauses, scrolls back up, pauses, and repeats
• Cleanup Function: stopAllScrolls() lets you easily disable scrolling if needed
• Edge Case Handling: Skips tables where content is shorter than the container (no unnecessary scrolling)

内容的提问来源于stack exchange，提问作者shubham gupta