Skip to content

API.md

Latest commit

History

History
252 lines (208 loc) · 4.16 KB

API.md

File metadata and controls

252 lines (208 loc) · 4.16 KB
Raw

API

Usage

importScrollbarsfrom'solid-custom-scrollbars'// later on..return(<Wrapper><Scrollbars><Content/></Scrollbars></Wrapper>)

Props

onScroll

event handler for scroll events

onScroll: (event?: Event)=>any

onScrollFrame

runs inside the animation frame

// values about the current positioninterfaceIValues{left: number// scrollLeft progess, from 0 to 1top: number// scrollTop progess, from 0 to 1scrollLeft: number// Native scrollLeftscrollTop: number// Native scrollTopscrollWidth: number// Native scrollWidthscrollHeight: number// Native scrollHeightclientWidth: number// Width of the viewclientHeight: number// Height of the view}
onScroll: (values: IValues)=>any

onScrollStart

called when scrolling starts

onScrollStart: ()=>any

onScrollStop

called when scrolling stops

onScrollStop: ()=>any

onUpdate

called when ever the component is updated. Runs inside the animation frame

onUpdate: (values: IValues)=>any

renderView

the element your content will be rendered in

renderView: Component<JSX.HTMLAttributes<HTMLDivElement>>

renderTrackHorizontal

the horizontal track element

renderTrackHorizontal: Component<RenderComponentProps>

renderTrackVertical

the vertical track element

renderTrackVertical: Component<RenderComponentProps>

renderThumbHorizontal

the horizontal thumb element

renderThumbHorizontal: Component<RenderComponentProps>

renderThumbVertical

the vertical thumb element

renderThumbVertical: Component<RenderComponentProps>

thumbSize

set a fixed size for thumbs in px

thumbSize: number

thumbMinSize

minimal thumb size in px (default: 30)

thumbMinSize: number

hideTracksWhenNotNeeded

hide tracks (visibility: hidden) when content does not overflow container (default: false)

hideTracksWhenNotNeeded: boolean

autoHide

enable auto-hide mode (default: false)

when set to true tracks will hide automatically and are only visible while scrolling

autoHide: boolean

autoHideTimeout

hide delay in ms (default: 1000)

autoHideTimeout: number

autoHideDuration

duration for hide animation in ms (default: 200)

autoHideDuration: number

autoHeight

enable auto-height mode (default: false)

when set to true the container grows with content

autoHeight: boolean

autoHeightMin

Set a minimum height for auto-height mode (default: 0)

autoHeightMin: number

autoHeightMax

Set a maximum height for auto-height mode (default: 200)

autoHeightMax: number

universal

Enable universal rendering (default: false)

learn how to use universal rendering

universal: boolean

Methods

the methods can be accessed through the functions object.

constApp: Component=()=>{letscrollbarRefonMount(()=>{scrollbarRef.functions.scrollTop()})return(<Scrollbarsref={scrollbarRef}></Scrollbars>)}

scrollTop

scroll to the top value

scrollTop: (top=0)=>void

scrollLeft

scroll to the left value

scrollLeft: (left=0)=>void

scrollToTop

scroll to top

scrollToTop: ()=>void

scrollToBottom

scroll to bottom

scrollToBottom: ()=>void

scrollToLeft

scroll to left

scrollToLeft: ()=>void

scrollToRight

scroll to right

scrollToRight: ()=>void

getScrollLeft

get scrollLeft value

getScrollLeft: ()=>number

getScrollTop

get scrollTop value

getScrollTop: ()=>number

getScrollWidth

get scrollWidth value

getScrollWidth: ()=>number

getScrollHeight

get scrollHeight value

getScrollHeight: ()=>number

getClientWidth

get view client width

getClientWidth: ()=>number

getClientHeight

get view client height

getClientHeight: ()=>number

getValues

get an object with values about the current position.

getValues: ()=>IValues