当前位置：首页 > React

react实现列表上下滚动

2026-01-27 11:33:03React

实现列表上下滚动的React方法

在React中实现列表的上下滚动可以通过多种方式完成，以下是几种常见的方法：

使用CSS overflow属性

通过CSS的overflow-y: scroll属性可以让容器内的内容滚动。

import React from 'react';

function ScrollList({ items }) {
  return (
    <div style={{ height: '300px', overflowY: 'scroll' }}>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

export default ScrollList;

使用React的useRef和scrollTo方法

可以通过ref获取DOM元素并调用scrollTo方法实现更精确的控制。

import React, { useRef } from 'react';

function ScrollList({ items }) {
  const listRef = useRef(null);

  const scrollToTop = () => {
    listRef.current.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const scrollToBottom = () => {
    listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={scrollToTop}>Scroll to Top</button>
      <div ref={listRef} style={{ height: '300px', overflowY: 'scroll' }}>
        {items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
      <button onClick={scrollToBottom}>Scroll to Bottom</button>
    </div>
  );
}

export default ScrollList;

使用第三方库react-scroll

react-scroll库提供了更丰富的滚动功能。

import React from 'react';
import { animateScroll } from 'react-scroll';

function ScrollList({ items }) {
  const scrollToTop = () => {
    animateScroll.scrollToTop();
  };

  const scrollToBottom = () => {
    animateScroll.scrollToBottom();
  };

  return (
    <div>
      <button onClick={scrollToTop}>Scroll to Top</button>
      <div style={{ height: '300px', overflowY: 'scroll' }}>
        {items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
      <button onClick={scrollToBottom}>Scroll to Bottom</button>
    </div>
  );
}

export default ScrollList;

实现无限滚动

对于大量数据，可以结合Intersection Observer实现无限滚动。

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

function InfiniteScrollList() {
  const [items, setItems] = useState(Array.from({ length: 20 }));
  const [loading, setLoading] = useState(false);
  const observerRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          loadMoreItems();
        }
      },
      { threshold: 1.0 }
    );

    if (observerRef.current) {
      observer.observe(observerRef.current);
    }

    return () => {
      if (observerRef.current) {
        observer.unobserve(observerRef.current);
      }
    };
  }, []);

  const loadMoreItems = () => {
    setLoading(true);
    setTimeout(() => {
      setItems((prevItems) => [...prevItems, ...Array.from({ length: 20 })]);
      setLoading(false);
    }, 1000);
  };

  return (
    <div style={{ height: '500px', overflowY: 'scroll' }}>
      {items.map((_, index) => (
        <div key={index} style={{ padding: '20px', border: '1px solid #ccc' }}>
          Item {index + 1}
        </div>
      ))}
      <div ref={observerRef}>{loading && 'Loading more items...'}</div>
    </div>
  );
}

export default InfiniteScrollList;

以上方法可以根据具体需求选择使用，CSS方法最简单，useRef方法提供了更多控制，第三方库则提供了更多高级功能，无限滚动适用于大数据量的场景。

react实现列表上下滚动