import React from "react";
import Scrollbar from 'funda-ui/Scrollbar';
// component styles
import 'funda-ui/Scrollbar/index.css';
export default () => {
return (
<>
<Scrollbar
onMove={(res: any) => console.log(res)}
>
<div style={{ height: '350px' }}>
<div style={{ width: '3000px' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.
</p>
<p>
Nam volutpat urna eget velit gravida, sodales iaculis lectus
ultrices. Pellentesque eu velit in erat interdum fermentum nec et
nulla. Nulla vel purus felis. Pellentesque vestibulum tincidunt
pulvinar. Nam nisi sapien, mattis id rutrum nec, convallis sed
ligula. Duis ut odio vel dui tincidunt facilisis. Etiam consectetur
arcu ac orci dictum eleifend. Mauris ut ligula in nisi eleifend
vulputate. Cras lorem lectus, sollicitudin vitae leo ut, dictum
varius urna. Quisque porttitor, nibh vel varius hendrerit, felis
massa bibendum diam, eu finibus lectus arcu quis neque. Duis a nulla
ex. Nullam lacinia leo ornare, fringilla massa a, dictum mi. Integer
laoreet interdum faucibus. Vestibulum egestas orci a nisl pharetra
placerat.
</p>
<p>
Quisque posuere et odio bibendum auctor. Nullam porta sapien eget
dui congue, nec tempor ante lacinia. Praesent id hendrerit urna, in
tempus sapien. Fusce pretium semper justo, ut accumsan nisi
fermentum in. Quisque ligula ante, consectetur non sapien sit amet,
semper iaculis sapien. Vestibulum a vehicula metus, a commodo velit.
Quisque auctor semper volutpat. Quisque hendrerit hendrerit tempus.
</p>
<p>
Nullam auctor felis massa, nec mattis nibh sollicitudin id.
Suspendisse aliquet arcu id tortor eleifend ultrices. Donec at
lobortis augue. Fusce fermentum consectetur purus et semper.
Suspendisse fringilla ex magna, a cursus quam accumsan posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
commodo accumsan nisl id hendrerit. Sed non ante mi. Donec euismod,
neque non sodales vulputate, dui ex efficitur risus, eu fringilla
lorem ex in lorem.
</p>
<p>
Duis vitae mauris non risus semper scelerisque. Phasellus pulvinar
feugiat nunc at ullamcorper. Praesent vehicula, ipsum nec convallis
rhoncus, neque leo sollicitudin quam, in maximus justo massa in
ipsum. Duis ornare eros tortor, in finibus tellus gravida et.
Phasellus tristique turpis at sapien efficitur, ac ornare dui
elementum. Donec porta efficitur metus a vehicula. Donec sed
facilisis purus, bibendum hendrerit lacus. Donec posuere est nisi,
ullamcorper tincidunt diam efficitur eget. Etiam pulvinar euismod
tincidunt.
</p>
<p>
Pellentesque sit amet libero sed felis tempus rhoncus sit amet vitae
quam. Praesent ut suscipit dui. Integer lacus diam, tristique id
ligula eget, blandit lacinia tortor. Etiam volutpat a velit at
consequat. Nulla faucibus in nulla sit amet tempor. Vivamus vel
egestas leo, ut efficitur nulla. Pellentesque vel tincidunt purus.
Curabitur ultricies sem id justo rutrum malesuada. Aliquam ipsum
lacus, euismod ut velit sed, facilisis vestibulum nibh. Ut ut
imperdiet turpis. Mauris orci quam, porta eu risus et, maximus
fringilla magna. Integer ac est elementum magna egestas consequat.
Pellentesque lacinia ultricies posuere. Integer id aliquam orci, id
imperdiet arcu.
</p>
<p>
Morbi ac arcu pulvinar, laoreet tortor non, euismod ligula. Sed
sollicitudin vehicula aliquam. Nullam blandit pulvinar vehicula.
Etiam et turpis ultrices libero rutrum varius. Pellentesque
efficitur odio vitae sapien consectetur imperdiet. Ut luctus elit ac
pharetra malesuada. Vestibulum laoreet rhoncus elit, nec consequat
eros blandit id.
</p>
<p>
Integer ac felis varius, gravida augue eu, luctus ligula. Sed nec
elementum magna, ut rutrum mi. Proin eget ante arcu. Pellentesque
eget auctor augue. Proin eget lectus viverra, placerat nulla eu,
ornare massa. Morbi tincidunt metus ut quam lobortis sagittis. Nam
lectus ipsum, elementum a aliquet sed, posuere nec metus. Mauris
congue sit amet nibh et euismod. Nullam lectus eros, tristique sit
amet nisl sit amet, semper tempus tellus. Nulla sagittis eros ac
gravida consectetur. Aenean in nisi lacus. Proin sit amet facilisis
turpis.
</p>
<p>
Nunc vehicula et libero eget gravida. Aenean ut dolor accumsan,
condimentum ligula eu, consequat dui. Sed sagittis augue vel viverra
rhoncus. Aenean semper vel lectus at mollis. Quisque suscipit
interdum tellus, in congue enim vestibulum eu. Nam congue ligula et
lacus dictum, in fermentum enim commodo. Cras fringilla auctor
metus, vitae bibendum nibh auctor sit amet. Nulla facilisi. Donec
ornare tempus enim a consequat. Sed lobortis vitae ipsum vel
consectetur. Morbi eget dui justo. Cras egestas aliquam massa sed
accumsan. Phasellus id efficitur nulla. Quisque iaculis quam
commodo, tristique nibh in, placerat dolor.
</p>
<p>
Aenean maximus rhoncus commodo. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus quam nunc, ornare vel ultricies eget, vulputate eget urna.
Sed posuere rutrum pharetra. Ut scelerisque tempus dignissim.
Praesent vel dignissim dui. Duis scelerisque nec dui ac tincidunt.
Cras sed mattis ligula, id vehicula lectus. Curabitur ac hendrerit
quam, eu imperdiet nisl. Nullam facilisis volutpat tortor id
blandit. Nunc vulputate imperdiet lorem, a aliquam nulla consequat
nec. Duis ac auctor quam. Phasellus et nibh nisi. Phasellus luctus
viverra magna nec tincidunt. Maecenas elit nibh, vulputate eget
suscipit quis, tristique id neque.
</p>
<p>
Etiam vestibulum pellentesque mauris, sed vestibulum ante vehicula
ut. Nulla quis tincidunt est, vel molestie ex. Vivamus ultrices
vehicula lorem, at tincidunt risus tincidunt ullamcorper. Mauris
aliquam leo a eros semper, eget scelerisque ante lobortis. Ut
lacinia placerat sollicitudin. Quisque blandit tortor a egestas
vehicula. Cras et volutpat nibh. Duis in libero quis orci laoreet
ornare tempor nec nibh. Aenean aliquet posuere varius. Nunc quis
convallis dolor, aliquam elementum risus.
</p>
<p>
Sed posuere ante id dui efficitur scelerisque. Sed scelerisque purus
ac elit luctus commodo. Praesent tincidunt libero augue, non
hendrerit dui maximus sed. Praesent sit amet ligula elit. Vestibulum
ullamcorper ligula sem, sed interdum eros tincidunt ac. Vestibulum
sagittis congue magna id tristique. Pellentesque nisl purus, ornare
id auctor id, efficitur non erat. Morbi sit amet erat non nibh
tristique ultricies. Quisque gravida pulvinar molestie. Vestibulum a
felis vitae lacus gravida luctus in sed mi. Quisque ornare
condimentum lacus, vestibulum fermentum turpis.
</p>
<p>
Integer vel porttitor ligula. Quisque volutpat arcu vitae vulputate
varius. Praesent posuere non tellus sit amet congue. Duis congue
quam quis euismod cursus. Integer ut nunc facilisis, suscipit lacus
sodales, varius ante. Ut dignissim maximus metus vel finibus. Nam
ultrices enim tortor, eu ultrices nulla blandit vitae. Vivamus sit
amet laoreet arcu. Nullam et laoreet augue. Donec non hendrerit
neque, eu dignissim nisi. Nullam ultricies semper tortor, non
pharetra est convallis at. Aliquam gravida lectus in quam venenatis
hendrerit.
</p>
<p>
Mauris metus nibh, interdum posuere sodales sed, accumsan nec ipsum.
Maecenas euismod odio faucibus enim euismod, in tincidunt lorem
ultrices. Duis congue libero ac lorem congue viverra. In hac
habitasse platea dictumst. Etiam consectetur massa sit amet mi
fringilla malesuada. Cras sit amet augue a metus consequat laoreet
sed nec enim. Quisque tellus turpis, tincidunt at sapien id,
vulputate posuere felis. Suspendisse feugiat mattis arcu a
sollicitudin. Fusce ut nibh turpis.
</p>
<p>
Morbi quam magna, dignissim ac venenatis porttitor, scelerisque
vitae est. Cras dapibus elementum efficitur. Cras gravida enim eget
mi elementum, vitae iaculis est consectetur. Ut auctor lacinia
risus, id feugiat purus vulputate sit amet. Fusce tincidunt quam
vitae tortor ornare fringilla. Vivamus consequat feugiat
ullamcorper. Mauris tempus, eros eget facilisis bibendum, leo purus
accumsan dui, ac imperdiet ante tortor in augue. In ullamcorper
vehicula porta.
</p>
</div>
</Scrollbar>
<Scrollbar onlyVerticle>
<div style={{ height: '350px' }}>
<div style={{ width: '3000px' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.
</p>
<p>
Nam volutpat urna eget velit gravida, sodales iaculis lectus
ultrices. Pellentesque eu velit in erat interdum fermentum nec et
nulla. Nulla vel purus felis. Pellentesque vestibulum tincidunt
pulvinar. Nam nisi sapien, mattis id rutrum nec, convallis sed
ligula. Duis ut odio vel dui tincidunt facilisis. Etiam consectetur
arcu ac orci dictum eleifend. Mauris ut ligula in nisi eleifend
vulputate. Cras lorem lectus, sollicitudin vitae leo ut, dictum
varius urna. Quisque porttitor, nibh vel varius hendrerit, felis
massa bibendum diam, eu finibus lectus arcu quis neque. Duis a nulla
ex. Nullam lacinia leo ornare, fringilla massa a, dictum mi. Integer
laoreet interdum faucibus. Vestibulum egestas orci a nisl pharetra
placerat.
</p>
<p>
Quisque posuere et odio bibendum auctor. Nullam porta sapien eget
dui congue, nec tempor ante lacinia. Praesent id hendrerit urna, in
tempus sapien. Fusce pretium semper justo, ut accumsan nisi
fermentum in. Quisque ligula ante, consectetur non sapien sit amet,
semper iaculis sapien. Vestibulum a vehicula metus, a commodo velit.
Quisque auctor semper volutpat. Quisque hendrerit hendrerit tempus.
</p>
<p>
Nullam auctor felis massa, nec mattis nibh sollicitudin id.
Suspendisse aliquet arcu id tortor eleifend ultrices. Donec at
lobortis augue. Fusce fermentum consectetur purus et semper.
Suspendisse fringilla ex magna, a cursus quam accumsan posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
commodo accumsan nisl id hendrerit. Sed non ante mi. Donec euismod,
neque non sodales vulputate, dui ex efficitur risus, eu fringilla
lorem ex in lorem.
</p>
<p>
Duis vitae mauris non risus semper scelerisque. Phasellus pulvinar
feugiat nunc at ullamcorper. Praesent vehicula, ipsum nec convallis
rhoncus, neque leo sollicitudin quam, in maximus justo massa in
ipsum. Duis ornare eros tortor, in finibus tellus gravida et.
Phasellus tristique turpis at sapien efficitur, ac ornare dui
elementum. Donec porta efficitur metus a vehicula. Donec sed
facilisis purus, bibendum hendrerit lacus. Donec posuere est nisi,
ullamcorper tincidunt diam efficitur eget. Etiam pulvinar euismod
tincidunt.
</p>
<p>
Pellentesque sit amet libero sed felis tempus rhoncus sit amet vitae
quam. Praesent ut suscipit dui. Integer lacus diam, tristique id
ligula eget, blandit lacinia tortor. Etiam volutpat a velit at
consequat. Nulla faucibus in nulla sit amet tempor. Vivamus vel
egestas leo, ut efficitur nulla. Pellentesque vel tincidunt purus.
Curabitur ultricies sem id justo rutrum malesuada. Aliquam ipsum
lacus, euismod ut velit sed, facilisis vestibulum nibh. Ut ut
imperdiet turpis. Mauris orci quam, porta eu risus et, maximus
fringilla magna. Integer ac est elementum magna egestas consequat.
Pellentesque lacinia ultricies posuere. Integer id aliquam orci, id
imperdiet arcu.
</p>
<p>
Morbi ac arcu pulvinar, laoreet tortor non, euismod ligula. Sed
sollicitudin vehicula aliquam. Nullam blandit pulvinar vehicula.
Etiam et turpis ultrices libero rutrum varius. Pellentesque
efficitur odio vitae sapien consectetur imperdiet. Ut luctus elit ac
pharetra malesuada. Vestibulum laoreet rhoncus elit, nec consequat
eros blandit id.
</p>
<p>
Integer ac felis varius, gravida augue eu, luctus ligula. Sed nec
elementum magna, ut rutrum mi. Proin eget ante arcu. Pellentesque
eget auctor augue. Proin eget lectus viverra, placerat nulla eu,
ornare massa. Morbi tincidunt metus ut quam lobortis sagittis. Nam
lectus ipsum, elementum a aliquet sed, posuere nec metus. Mauris
congue sit amet nibh et euismod. Nullam lectus eros, tristique sit
amet nisl sit amet, semper tempus tellus. Nulla sagittis eros ac
gravida consectetur. Aenean in nisi lacus. Proin sit amet facilisis
turpis.
</p>
<p>
Nunc vehicula et libero eget gravida. Aenean ut dolor accumsan,
condimentum ligula eu, consequat dui. Sed sagittis augue vel viverra
rhoncus. Aenean semper vel lectus at mollis. Quisque suscipit
interdum tellus, in congue enim vestibulum eu. Nam congue ligula et
lacus dictum, in fermentum enim commodo. Cras fringilla auctor
metus, vitae bibendum nibh auctor sit amet. Nulla facilisi. Donec
ornare tempus enim a consequat. Sed lobortis vitae ipsum vel
consectetur. Morbi eget dui justo. Cras egestas aliquam massa sed
accumsan. Phasellus id efficitur nulla. Quisque iaculis quam
commodo, tristique nibh in, placerat dolor.
</p>
<p>
Aenean maximus rhoncus commodo. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus quam nunc, ornare vel ultricies eget, vulputate eget urna.
Sed posuere rutrum pharetra. Ut scelerisque tempus dignissim.
Praesent vel dignissim dui. Duis scelerisque nec dui ac tincidunt.
Cras sed mattis ligula, id vehicula lectus. Curabitur ac hendrerit
quam, eu imperdiet nisl. Nullam facilisis volutpat tortor id
blandit. Nunc vulputate imperdiet lorem, a aliquam nulla consequat
nec. Duis ac auctor quam. Phasellus et nibh nisi. Phasellus luctus
viverra magna nec tincidunt. Maecenas elit nibh, vulputate eget
suscipit quis, tristique id neque.
</p>
<p>
Etiam vestibulum pellentesque mauris, sed vestibulum ante vehicula
ut. Nulla quis tincidunt est, vel molestie ex. Vivamus ultrices
vehicula lorem, at tincidunt risus tincidunt ullamcorper. Mauris
aliquam leo a eros semper, eget scelerisque ante lobortis. Ut
lacinia placerat sollicitudin. Quisque blandit tortor a egestas
vehicula. Cras et volutpat nibh. Duis in libero quis orci laoreet
ornare tempor nec nibh. Aenean aliquet posuere varius. Nunc quis
convallis dolor, aliquam elementum risus.
</p>
<p>
Sed posuere ante id dui efficitur scelerisque. Sed scelerisque purus
ac elit luctus commodo. Praesent tincidunt libero augue, non
hendrerit dui maximus sed. Praesent sit amet ligula elit. Vestibulum
ullamcorper ligula sem, sed interdum eros tincidunt ac. Vestibulum
sagittis congue magna id tristique. Pellentesque nisl purus, ornare
id auctor id, efficitur non erat. Morbi sit amet erat non nibh
tristique ultricies. Quisque gravida pulvinar molestie. Vestibulum a
felis vitae lacus gravida luctus in sed mi. Quisque ornare
condimentum lacus, vestibulum fermentum turpis.
</p>
<p>
Integer vel porttitor ligula. Quisque volutpat arcu vitae vulputate
varius. Praesent posuere non tellus sit amet congue. Duis congue
quam quis euismod cursus. Integer ut nunc facilisis, suscipit lacus
sodales, varius ante. Ut dignissim maximus metus vel finibus. Nam
ultrices enim tortor, eu ultrices nulla blandit vitae. Vivamus sit
amet laoreet arcu. Nullam et laoreet augue. Donec non hendrerit
neque, eu dignissim nisi. Nullam ultricies semper tortor, non
pharetra est convallis at. Aliquam gravida lectus in quam venenatis
hendrerit.
</p>
<p>
Mauris metus nibh, interdum posuere sodales sed, accumsan nec ipsum.
Maecenas euismod odio faucibus enim euismod, in tincidunt lorem
ultrices. Duis congue libero ac lorem congue viverra. In hac
habitasse platea dictumst. Etiam consectetur massa sit amet mi
fringilla malesuada. Cras sit amet augue a metus consequat laoreet
sed nec enim. Quisque tellus turpis, tincidunt at sapien id,
vulputate posuere felis. Suspendisse feugiat mattis arcu a
sollicitudin. Fusce ut nibh turpis.
</p>
<p>
Morbi quam magna, dignissim ac venenatis porttitor, scelerisque
vitae est. Cras dapibus elementum efficitur. Cras gravida enim eget
mi elementum, vitae iaculis est consectetur. Ut auctor lacinia
risus, id feugiat purus vulputate sit amet. Fusce tincidunt quam
vitae tortor ornare fringilla. Vivamus consequat feugiat
ullamcorper. Mauris tempus, eros eget facilisis bibendum, leo purus
accumsan dui, ac imperdiet ante tortor in augue. In ullamcorper
vehicula porta.
</p>
</div>
</Scrollbar>
<Scrollbar onlyHorizontal horizontallyWithWheel>
<p style={{whiteSpace: 'nowrap'}}>
appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/Supercalifragilisticexpialidocious.txt
</p>
</Scrollbar>
<Scrollbar onlyHorizontal>
<p style={{wordWrap: 'break-word'}}>
appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/appens/To/Be/Strangely/Named/Supercalifragilisticexpialidocious.txt
</p>
</Scrollbar>
<Scrollbar onlyHorizontal>
<div style={{ width: '3000px' }} id="demo-change">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
</div>
<p>
<button type="button" style={{background: 'red'}} onClick={()=> {
document.querySelector('#demo-change').style.width = '5000px';
}}>Change Width to 5000px</button>Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.
</p>
<p>
Nam volutpat urna eget velit gravida, sodales iaculis lectus
ultrices. Pellentesque eu velit in erat interdum fermentum nec et
nulla. Nulla vel purus felis. Pellentesque vestibulum tincidunt
pulvinar. Nam nisi sapien, mattis id rutrum nec, convallis sed
ligula. Duis ut odio vel dui tincidunt facilisis. Etiam consectetur
arcu ac orci dictum eleifend. Mauris ut ligula in nisi eleifend
vulputate. Cras lorem lectus, sollicitudin vitae leo ut, dictum
varius urna. Quisque porttitor, nibh vel varius hendrerit, felis
massa bibendum diam, eu finibus lectus arcu quis neque. Duis a nulla
ex. Nullam lacinia leo ornare, fringilla massa a, dictum mi. Integer
laoreet interdum faucibus. Vestibulum egestas orci a nisl pharetra
placerat.
</p>
</Scrollbar>
</>
);
}Please use the data attribute to recompute the scrollbar state when updating data.
import React, { useEffect, useState } from "react";
import Scrollbar from 'funda-ui/Scrollbar';
// component styles
import 'funda-ui/Scrollbar/index.css';
export default () => {
const [widthContent, setWidthContent] = useState<React.ReactNode>(null);
const [scrollbarUpdate, setScrollbarUpdate] = useState<number>(0);
useEffect(() => {
setTimeout(() => {
setWidthContent(<div style={{ width: '3000px' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodoLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
</div>);
setScrollbarUpdate(Math.random());
}, 1000);
}, []);
return (
<>
<Scrollbar
data={scrollbarUpdate}
// autoScrollTo="down"
>
<div style={{ height: '350px' }}>
{widthContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
malesuada ligula et faucibus rhoncus. Nulla consequat risus et
luctus ullamcorper. Nam facilisis at elit id condimentum. Nulla
luctus tortor at nisl consectetur, in consequat nulla rutrum. Sed
condimentum ligula non sapien elementum, sed placerat metus
consequat. Sed sollicitudin sem sit amet venenatis tincidunt. In
efficitur sed dolor vel consectetur. Mauris convallis pharetra
risus. Donec pretium erat vel augue consectetur lacinia. Nunc eu
lobortis risus. Quisque varius erat eget est dignissim vestibulum.
Suspendisse sagittis dui lorem, sodales mollis mi auctor at. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ut commodo
massa.
</p>
<p>
Nam volutpat urna eget velit gravida, sodales iaculis lectus
ultrices. Pellentesque eu velit in erat interdum fermentum nec et
nulla. Nulla vel purus felis. Pellentesque vestibulum tincidunt
pulvinar. Nam nisi sapien, mattis id rutrum nec, convallis sed
ligula. Duis ut odio vel dui tincidunt facilisis. Etiam consectetur
arcu ac orci dictum eleifend. Mauris ut ligula in nisi eleifend
vulputate. Cras lorem lectus, sollicitudin vitae leo ut, dictum
varius urna. Quisque porttitor, nibh vel varius hendrerit, felis
massa bibendum diam, eu finibus lectus arcu quis neque. Duis a nulla
ex. Nullam lacinia leo ornare, fringilla massa a, dictum mi. Integer
laoreet interdum faucibus. Vestibulum egestas orci a nisl pharetra
placerat.
</p>
<p>
Quisque posuere et odio bibendum auctor. Nullam porta sapien eget
dui congue, nec tempor ante lacinia. Praesent id hendrerit urna, in
tempus sapien. Fusce pretium semper justo, ut accumsan nisi
fermentum in. Quisque ligula ante, consectetur non sapien sit amet,
semper iaculis sapien. Vestibulum a vehicula metus, a commodo velit.
Quisque auctor semper volutpat. Quisque hendrerit hendrerit tempus.
</p>
<p>
Nullam auctor felis massa, nec mattis nibh sollicitudin id.
Suspendisse aliquet arcu id tortor eleifend ultrices. Donec at
lobortis augue. Fusce fermentum consectetur purus et semper.
Suspendisse fringilla ex magna, a cursus quam accumsan posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
commodo accumsan nisl id hendrerit. Sed non ante mi. Donec euismod,
neque non sodales vulputate, dui ex efficitur risus, eu fringilla
lorem ex in lorem.
</p>
<p>
Duis vitae mauris non risus semper scelerisque. Phasellus pulvinar
feugiat nunc at ullamcorper. Praesent vehicula, ipsum nec convallis
rhoncus, neque leo sollicitudin quam, in maximus justo massa in
ipsum. Duis ornare eros tortor, in finibus tellus gravida et.
Phasellus tristique turpis at sapien efficitur, ac ornare dui
elementum. Donec porta efficitur metus a vehicula. Donec sed
facilisis purus, bibendum hendrerit lacus. Donec posuere est nisi,
ullamcorper tincidunt diam efficitur eget. Etiam pulvinar euismod
tincidunt.
</p>
<p>
Pellentesque sit amet libero sed felis tempus rhoncus sit amet vitae
quam. Praesent ut suscipit dui. Integer lacus diam, tristique id
ligula eget, blandit lacinia tortor. Etiam volutpat a velit at
consequat. Nulla faucibus in nulla sit amet tempor. Vivamus vel
egestas leo, ut efficitur nulla. Pellentesque vel tincidunt purus.
Curabitur ultricies sem id justo rutrum malesuada. Aliquam ipsum
lacus, euismod ut velit sed, facilisis vestibulum nibh. Ut ut
imperdiet turpis. Mauris orci quam, porta eu risus et, maximus
fringilla magna. Integer ac est elementum magna egestas consequat.
Pellentesque lacinia ultricies posuere. Integer id aliquam orci, id
imperdiet arcu.
</p>
<p>
Morbi ac arcu pulvinar, laoreet tortor non, euismod ligula. Sed
sollicitudin vehicula aliquam. Nullam blandit pulvinar vehicula.
Etiam et turpis ultrices libero rutrum varius. Pellentesque
efficitur odio vitae sapien consectetur imperdiet. Ut luctus elit ac
pharetra malesuada. Vestibulum laoreet rhoncus elit, nec consequat
eros blandit id.
</p>
<p>
Integer ac felis varius, gravida augue eu, luctus ligula. Sed nec
elementum magna, ut rutrum mi. Proin eget ante arcu. Pellentesque
eget auctor augue. Proin eget lectus viverra, placerat nulla eu,
ornare massa. Morbi tincidunt metus ut quam lobortis sagittis. Nam
lectus ipsum, elementum a aliquet sed, posuere nec metus. Mauris
congue sit amet nibh et euismod. Nullam lectus eros, tristique sit
amet nisl sit amet, semper tempus tellus. Nulla sagittis eros ac
gravida consectetur. Aenean in nisi lacus. Proin sit amet facilisis
turpis.
</p>
<p>
Nunc vehicula et libero eget gravida. Aenean ut dolor accumsan,
condimentum ligula eu, consequat dui. Sed sagittis augue vel viverra
rhoncus. Aenean semper vel lectus at mollis. Quisque suscipit
interdum tellus, in congue enim vestibulum eu. Nam congue ligula et
lacus dictum, in fermentum enim commodo. Cras fringilla auctor
metus, vitae bibendum nibh auctor sit amet. Nulla facilisi. Donec
ornare tempus enim a consequat. Sed lobortis vitae ipsum vel
consectetur. Morbi eget dui justo. Cras egestas aliquam massa sed
accumsan. Phasellus id efficitur nulla. Quisque iaculis quam
commodo, tristique nibh in, placerat dolor.
</p>
<p>
Aenean maximus rhoncus commodo. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus quam nunc, ornare vel ultricies eget, vulputate eget urna.
Sed posuere rutrum pharetra. Ut scelerisque tempus dignissim.
Praesent vel dignissim dui. Duis scelerisque nec dui ac tincidunt.
Cras sed mattis ligula, id vehicula lectus. Curabitur ac hendrerit
quam, eu imperdiet nisl. Nullam facilisis volutpat tortor id
blandit. Nunc vulputate imperdiet lorem, a aliquam nulla consequat
nec. Duis ac auctor quam. Phasellus et nibh nisi. Phasellus luctus
viverra magna nec tincidunt. Maecenas elit nibh, vulputate eget
suscipit quis, tristique id neque.
</p>
<p>
Etiam vestibulum pellentesque mauris, sed vestibulum ante vehicula
ut. Nulla quis tincidunt est, vel molestie ex. Vivamus ultrices
vehicula lorem, at tincidunt risus tincidunt ullamcorper. Mauris
aliquam leo a eros semper, eget scelerisque ante lobortis. Ut
lacinia placerat sollicitudin. Quisque blandit tortor a egestas
vehicula. Cras et volutpat nibh. Duis in libero quis orci laoreet
ornare tempor nec nibh. Aenean aliquet posuere varius. Nunc quis
convallis dolor, aliquam elementum risus.
</p>
<p>
Sed posuere ante id dui efficitur scelerisque. Sed scelerisque purus
ac elit luctus commodo. Praesent tincidunt libero augue, non
hendrerit dui maximus sed. Praesent sit amet ligula elit. Vestibulum
ullamcorper ligula sem, sed interdum eros tincidunt ac. Vestibulum
sagittis congue magna id tristique. Pellentesque nisl purus, ornare
id auctor id, efficitur non erat. Morbi sit amet erat non nibh
tristique ultricies. Quisque gravida pulvinar molestie. Vestibulum a
felis vitae lacus gravida luctus in sed mi. Quisque ornare
condimentum lacus, vestibulum fermentum turpis.
</p>
<p>
Integer vel porttitor ligula. Quisque volutpat arcu vitae vulputate
varius. Praesent posuere non tellus sit amet congue. Duis congue
quam quis euismod cursus. Integer ut nunc facilisis, suscipit lacus
sodales, varius ante. Ut dignissim maximus metus vel finibus. Nam
ultrices enim tortor, eu ultrices nulla blandit vitae. Vivamus sit
amet laoreet arcu. Nullam et laoreet augue. Donec non hendrerit
neque, eu dignissim nisi. Nullam ultricies semper tortor, non
pharetra est convallis at. Aliquam gravida lectus in quam venenatis
hendrerit.
</p>
<p>
Mauris metus nibh, interdum posuere sodales sed, accumsan nec ipsum.
Maecenas euismod odio faucibus enim euismod, in tincidunt lorem
ultrices. Duis congue libero ac lorem congue viverra. In hac
habitasse platea dictumst. Etiam consectetur massa sit amet mi
fringilla malesuada. Cras sit amet augue a metus consequat laoreet
sed nec enim. Quisque tellus turpis, tincidunt at sapien id,
vulputate posuere felis. Suspendisse feugiat mattis arcu a
sollicitudin. Fusce ut nibh turpis.
</p>
<p>
Morbi quam magna, dignissim ac venenatis porttitor, scelerisque
vitae est. Cras dapibus elementum efficitur. Cras gravida enim eget
mi elementum, vitae iaculis est consectetur. Ut auctor lacinia
risus, id feugiat purus vulputate sit amet. Fusce tincidunt quam
vitae tortor ornare fringilla. Vivamus consequat feugiat
ullamcorper. Mauris tempus, eros eget facilisis bibendum, leo purus
accumsan dui, ac imperdiet ante tortor in augue. In ullamcorper
vehicula porta.
</p>
</div>
</Scrollbar>
</>
);
}import Scrollbar from 'funda-ui/Scrollbar';| Property | Type | Default | Description | Required |
|---|---|---|---|---|
onlyVerticle |
boolean | false | Only show vertical scrollbar. | - |
onlyHorizontal |
boolean | false | Only show horizontal scrollbar. | - |
data You could use key instead of it |
any | - | Incoming data. Changes in the |
- |
autoScrollTo |
string (down | up | left | right) | boolean |
false | Automatically scroll through to some position of page. It is valid when |
- |
arrowIcons |
React.ReactNode[] | [<><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none"> <path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z"/> </svg></>,<><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none"> <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" /> </svg></>,<><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none" transform="translate(0 -2)"> <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z"/> </svg></>,<><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none" transform="translate(0 -2)"> <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" /> </svg></>] |
Set up/down/left/right icon. Use an array to set four icons. | - |
disableArrow |
boolean | false | Disable arrow. | - |
horizontallyWithWheel |
boolean | false | Horizontally with mouse wheel. It is valid when |
- |
onMove |
function | - | This function is called whenever the content is moved. Exposes the JSON format data about the option as an argument. You can use it like this: (res) => console.log(res) |
- |