import * as React from 'react' ; import { ScrollArea , ScrollAreaViewport , Scrollbar , ScrollAreaCorner , ScrollAreaThumb , } from '@radix-ui/react-scroll-area' ; export default function ScrollAreaPage ( ) { return ( < ScrollArea style = { { width : '400px' , height : '400px' } } > < Scrollbar orientation = "vertical" > < ScrollAreaThumb /> < /Scrollbar> < Scrollbar orientation = "horizontal" > < ScrollAreaThumb /> < /Scrollbar> < ScrollAreaViewport style = { { width : '2000px' , padding : 20 } } > < LongContent /> < LongContent / > < LongContent /> < LongContent / > < LongContent /> < LongContent / > < LongContent /> < /ScrollAreaViewport> < ScrollAreaCorner / > < /ScrollArea>); } function LongContent ( ) { return ( < React . Fragment > < p > Lacinia hendrerit auctor nam quisque augue suscipit feugiat , sit at imperdiet vitae lacus . Dolor sit dui posuere faucibus non pharetra laoreet conubia , augue rhoncus cras nisl sodales proin hac ipsum , per hendrerit sed volutpat natoque curae consectetur . Curae blandit neque vehicula vel mauris vulputate per felis sociosqu , sodales integer sollicitudin id litora accumsan viverra pulvinar , mus non adipiscing dolor facilisis habitasse mi leo . Litora faucibus eu pulvinar tempus gravida iaculis consectetur risus euismod fringilla , dui posuere viverra sapien tortor mattis et dolor tempor sem conubia , taciti sociis mus rhoncus cubilia praesent dapibus aliquet quis . Diam hendrerit aliquam metus dolor fusce lorem , non gravida arcu primis posuere ipsum adipiscing , mus sollicitudin eros lacinia mollis . < /p> < p > Habitant fames mi massa mollis fusce congue nascetur magna bibendum inceptos accumsan , potenti ipsum ac sollicitudin taciti dis rhoncus lacinia fermentum placerat . Himenaeos taciti egestas lacinia maecenas ornare ultricies , auctor vitae nulla mi posuere leo mollis , eleifend lacus rutrum ante curabitur . Nullam mi quisque nulla enim pretium facilisi interdum morbi , himenaeos velit fames pellentesque eget nascetur laoreet vel rutrum , malesuada risus ad netus dolor et scelerisque . < /p> < ul > < li > Dis cubilia aenean tortor iaculis fames duis aliquet < /li> < li > Erat non lacinia , tempor molestie fringilla < /li> < li > Porttitor litora praesent placerat pulvinar < /li> < li > Arcu curabitur fermentum felis sollicitudin varius nec cras < /li> < /ul> < p > Habitasse tristique hac ligula in metus blandit lobortis leo nullam litora , tempus fusce tincidunt phasellus urna est rhoncus pretium etiam eu , fames neque faucibus sociis primis felis dui vitae odio . Egestas purus morbi pulvinar luctus adipiscing rutrum ultrices hac , vehicula odio ridiculus cubilia vivamus blandit faucibus , dapibus velit sociis metus ultricies amet scelerisque . < /p> < p > Scelerisque commodo nam cras litora lacinia primis fames morbi natoque , quisque ante duis phasellus pharetra convallis montes felis . Consectetur leo suspendisse fringilla elementum maecenas massa urna malesuada auctor senectus , pretium turpis nisi orci ipsum vulputate cubilia sociis adipiscing . Vulputate ridiculus amet dis accumsan non ultrices fames mattis hendrerit , ornare elementum sociosqu eget consectetur duis viverra vivamus tincidunt , blandit nulla porta semper dolor pharetra nisi scelerisque . Consequat conubia porta cras et ac auctor pellentesque luctus morbi potenti , viverra varius commodo venenatis vestibulum erat sagittis laoreet . < /p> < /React.Fragment>); }