ReactJS中window.scrollTo()在次级滚动条上失效，需实现列表自动滚到底部

Hey there! I totally get why window.scrollTo() isn't working for you here— that method targets the main browser window's scrollbar, but your list is inside a separate scrollable container. Let's fix this with some React-specific solutions that directly target your list container.

Solution 1: Use React Refs (Functional Components) #

The most straightforward way is to create a ref pointing to your #List-container element, then manually set its scrollTop property to its total content height (scrollHeight) whenever your list updates.

Here's a complete example:

import { useRef, useEffect, useState } from 'react';

function ScrollableList() {
  // Create a ref for the scroll container
  const listContainerRef = useRef(null);
  // Your list data state
  const [listItems, setListItems] = useState([]);

  // Trigger scroll to bottom whenever listItems changes
  useEffect(() => {
    const container = listContainerRef.current;
    if (container) {
      // Set scrollTop to the total height of the container's content
      container.scrollTop = container.scrollHeight;
    }
  }, [listItems]); // Re-run effect when list data updates

  return (
    <div 
      id="List-container" 
      ref={listContainerRef}
      style={{ 
        maxHeight: '425px', 
        overflow: 'hidden', 
        overflowY: 'scroll',
        // Optional: Add some styling to make it visible
        border: '1px solid #eee'
      }}
    >
      <ul style={{ margin: 0, padding: '10px' }}>
        {listItems.map((item, idx) => (
          <li key={idx} style={{ padding: '8px 0' }}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

How this works: #

• scrollHeight gives you the total height of the container's content (including the part hidden outside the viewport).
• Setting scrollTop to scrollHeight forces the container to scroll all the way to the bottom.
• The useEffect hook ensures this happens every time your list data updates, so new items automatically scroll into view.

Solution 2: Class Component Alternative #

If you're using a class-based React component, the approach is similar but uses createRef instead:

import React, { Component, createRef } from 'react';

class ScrollableList extends Component {
  constructor(props) {
    super(props);
    this.listContainerRef = createRef();
    this.state = { listItems: [] };
  }

  componentDidUpdate(prevProps, prevState) {
    // Only scroll if the list data has changed
    if (prevState.listItems !== this.state.listItems && this.listContainerRef.current) {
      const container = this.listContainerRef.current;
      container.scrollTop = container.scrollHeight;
    }
  }

  render() {
    return (
      <div 
        id="List-container" 
        ref={this.listContainerRef}
        style={{ maxHeight: '425px', overflow: 'hidden', overflowY: 'scroll' }}
      >
        <ul>
          {this.state.listItems.map((item, idx) => (
            <li key={idx}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Quick Troubleshooting Tip #

If the scroll doesn't trigger immediately (e.g., when new items are added dynamically), it might be because React hasn't finished rendering the new DOM elements yet. In that case, wrap the scroll logic in requestAnimationFrame to ensure it runs after the DOM updates:

useEffect(() => {
  const scrollToBottom = () => {
    const container = listContainerRef.current;
    if (container) container.scrollTop = container.scrollHeight;
  };
  requestAnimationFrame(scrollToBottom);
}, [listItems]);

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