当前位置：首页 > React

react 实现滚动条

2026-01-27 19:26:36React

实现滚动条的基本方法

使用React实现滚动条可以通过原生CSS或第三方库完成。以下是几种常见方式：

原生CSS实现

/* 自定义滚动条样式 */
.container {
  height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.container::-webkit-scrollbar {
  width: 8px;
}

.container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

React组件中使用

function ScrollableBox() {
  return (
    <div className="container">
      {/* 长内容 */}
      <div style={{ height: '800px' }}>可滚动内容...</div>
    </div>
  );
}

使用第三方库

对于更复杂的滚动需求，可以考虑以下库：

react-custom-scrollbars

npm install react-custom-scrollbars

import { Scrollbars } from 'react-custom-scrollbars';

function CustomScroll() {
  return (
    <Scrollbars style={{ height: 300 }}>
      <div style={{ height: '800px' }}>自定义滚动条内容</div>
    </Scrollbars>
  );
}

react-scroll 适用于平滑滚动到指定位置：

npm install react-scroll

import { Link } from 'react-scroll';

function SmoothScroll() {
  return (
    <div>
      <Link to="section1" smooth={true}>跳转到第一节</Link>
      <div id="section1" style={{ height: '1000px' }}>目标区域</div>
    </div>
  );
}

动态控制滚动位置

通过ref手动控制滚动：

function ControlledScroll() {
  const scrollRef = useRef();

  const scrollToBottom = () => {
    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  };

  return (
    <div>
      <button onClick={scrollToBottom}>滚动到底部</button>
      <div ref={scrollRef} style={{ height: '300px', overflow: 'auto' }}>
        <div style={{ height: '800px' }}>内容区域</div>
      </div>
    </div>
  );
}

无限滚动实现

使用react-infinite-scroll-component：

npm install react-infinite-scroll-component

import InfiniteScroll from 'react-infinite-scroll-component';

function InfiniteList() {
  const [items, setItems] = useState(Array.from({ length: 20 }));
  const [hasMore, setHasMore] = useState(true);

  const fetchMoreData = () => {
    if (items.length >= 100) {
      setHasMore(false);
      return;
    }
    setTimeout(() => {
      setItems(items.concat(Array.from({ length: 20 })));
    }, 500);
  };

  return (
    <InfiniteScroll
      height={400}
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
    >
      {items.map((_, index) => (
        <div key={index}>Item {index}</div>
      ))}
    </InfiniteScroll>
  );
}