##Basic use
<ScrollArea style={{ width: 300, height: 300 }}>
{[...new Array(1000)].map((_, ind) => (
<div key={ind}>....</div>
)}
</ScrollArea>
##Custom use
<ScrollContainer>
{(props) => (
<ScrollPane {...props} style={{ maxWidth: width, height: 300 }}>
{[...new Array(100)].map((_, ind) => (
<div
key={ind}
style={{ background: ind === 32 ? '#f00' : '#fff', width: '900px' }}
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos est inventore
laboriosam minus officiis omnis possimus vero? Assumenda cum necessitatibus
perspiciatis quia vitae. Asperiores aut delectus ea ipsum nam! Doloremque?
</div>
))}
</ScrollPane>
<ScrollBar
orientation="vertical"
{...props}
style={{
top: 0,
right: -10,
width: '10px',
background: 'rgba(200, 200,200, 0.5)',
}}
sliderProps={{
style: {
width: '10px',
height: '100px',
background: 'pink',
},
}}
/>
)}
</ScrollContainer>