ScrollできるContainerを作る
登場人物は2つ
コンテナ
この箱の中でスクロールできる
コンテナの方にCSS: overflowを指定する
code:ts
const Container: React.FC = () => {
return (
<div className="w-64 h-48 border overflow-y-scroll">
<List />
</div>
);
};
hover-scrollbarを付与することも多いmrsekut.icon
大きいコンテンツ
コンテナをはみ出る感じのやつ
Scrollして表示されることは知らない
code:ts
const List: React.FC = () => {
return (
<ul>
{Array.from({ length: 20 }).map((_, index) => (
<li key={index} className="p-2 border-b">
アイテム {index + 1}
</li>
))}
</ul>
);
};