React Perfect Scrollbar 使用教程

npm install react-perfect-scrollbar

import React from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';

const App = () => {
  return (
    <PerfectScrollbar>
      <div style={{ height: '300px', width: '200px' }}>
        <p>这是一个带有自定义滚动条的容器。</p>
        <p>你可以在这里添加更多的内容...</p>
      </div>
    </PerfectScrollbar>
  );
};

export default App;

import React from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';

const LongList = () => {
  const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

  return (
    <PerfectScrollbar>
      <div style={{ height: '300px', width: '200px' }}>
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    </PerfectScrollbar>
  );
};

export default LongList;

/* 自定义滚动条样式 */
.ps__thumb-y {
  background-color: #888;
  width: 5px;
}
.ps__rail-y {
  background-color: #eee;
  width: 10px;
}