goldenyz / react-perfect-scrollbar

A react wrapper for perfect-scrollbar
MIT License
480 stars 91 forks source link

Is it possible to set up(by default) show X-scroll or Y-scroll?(Don't after scroll) #126

Open ignatovladislav opened 3 years ago

ignatovladislav commented 3 years ago

Hi! I spent a lot of time looking for the correct answer, but I didn't found the answer.

I looked at more examples. As we can see https://codesandbox.io/s/crazy-hopper-1smso?file=/src/example.scss:29-43/, In this case, works well. But in this example used 1.5.3, but I used 1.5.8, And if we change the version to 1.5.8 active X-scroll by default will hide(But Y-scroll will be active).

My question is: Is it possible to set up(by default) show X-scroll or Y-scroll?(Don't after scroll) Thanks!

Please, explain! How I can set up a default active scroll(X)? Or I don't have enough information? Thanks!

ignatovladislav commented 3 years ago

PS. I used your example with onYReachEnd={onYReachEnd}={state.onXReachEnd} . And I updated this value in DidMount with setTimeOut and now it works well.

But I want to understand this issue

prbxr commented 3 years ago

i to have this issue

prbxr commented 3 years ago

@ignatovladislav your trick helped indeed

export const ScrollbarWrapper = ({ inUse = true, children, class: _class, handleRef, ...props }: Props) => {
    // Fix scrollbal not visible before scrolling
    const [onXReachEnd, setOnXReachEnd] = useState<(() => void) | null>(null)
    useMount(() => {
        setTimeout(() => {
            setOnXReachEnd(() => {})
        }, 400)
    })

    return inUse ? (
        // @ts-ignore
        <PerfectScrollbar containerRef={handleRef} className={_class} {...props} onXReachEnd={onXReachEnd}>
            {children}
        </PerfectScrollbar>
    ) : (
        <div class={_class} ref={handleRef as RefCallback<HTMLDivElement>} {...props}>
            {children}
        </div>
    )
}