Getting the scroll ratio

[AHTOHO4]

This is a question

Hi! I decided to update from version 0.2.2 to version 0.5.6 and a problem arose:

In the previous version (0.2.2) when scrolling I could get in the onScroll method the ratio of the scrollable visible content to the content height of the entire content.

I can't figure out how to find out the ratio of scrollable content to the entire block in the current version of the library?

How I got it before:

import { OverlayScrollbarsComponent} from 'overlayscrollbars-react'

                <OverlayScrollbarsComponent
                    ref={conversationListScrollRef}
                    style={{ maxHeight: '556px' }}
                    options={{ scrollbars: { autoHide: 'move' }, callbacks: { onScroll } }}
                >

    const handleScroll = useCallback(() => {
           const osInstance = conversationListScrollRef.current.osInstance()
           const scrollInfo = osInstance?.scroll()

           if (scrollInfo.ratio.y > 0.8) {
                // Action with loading data
            }
    }, [handleLoadMore, isLoading, conversations, counts, conversationListScrollRef])

How can I access the "Ratio" property in the current version? I did not find any similar issues or discussions.

[KingSora]

Good day @AHTOHO4 :)

This is a breaking change from overlayscrollbars v1.x to v2.x which is used under the hood of overlayscrollbars-react. Since version 2 the library is not handling as many scrolling cases anymore and focuses only on the scrollbars.

You can calculate the ratio like this:

const { scrollOffsetElement } = osInstance.elements();
const { overflowAmount } = osInstance.state();

const scrollRatio = {
  x: (scrollOffsetElement.scrollLeft / overflowAmount.x) || 0,
  y: (scrollOffsetElement.scrollTop / overflowAmount.y) || 0,
};