I want to create a parallax effect (moving a background image while scrolling but with a slower factor).

I have a wrapper div element with overflow auto and inside that div I have the background image and also some content, contentHeight > imageHeight > wrapperDivHeight.

<WrapperDiv with overflow auto>
  <Content ... />
  <BackgroundImage with position absolute />
<WrapperDiv />

My formula to position the image is the following

const imageTransformY = (100 * scrollY / (contentHeight - wrapperDivHeight) * (imageHeight - wrapperDivHeight) / imageHeight);

scrollY -> the scroll position (y-axis) of WrapperDiv component
contentHeight -> the height of Content component
wrapperDivHeight -> the height of WrapperDiv component
imageHeight -> the height of the BackgroundImage component
imageTransformY -> css property to position the image

and it is working as expected.

The thing is that I want to avoid using contentHeight because I retrieve it from the Content component. Instead I would like to get the maximum possible scroll of WrapperDiv component and maybe the scrollbar height in order to calculate the contentHeight from these values (contentHeight = maxScrollY + scrollHeight)

Is this possible ? Is this possible with react-use ?