How to get the scrolling percentage of either the vertical or horizontal handle?

[artpumpkin]

Hey guys, I would like to get some help regarding my query, I tried to access the scroll state using OverlayScrollbarsComponent, but the values don't change when I scroll, I did notice that the handle element does change its tranform value, but I'm looking for a better approach.

My Scroll component used:

import { Box } from "@chakra-ui/react";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { ComponentProps } from "react";

interface ScrollProps {
  debug?: boolean;
  compact?: boolean;
  children: React.ReactNode;
}

export const Scroll = ({
  debug,
  compact = false,
  children,
  ...rest
}: ScrollProps & ComponentProps<typeof OverlayScrollbarsComponent>) => {
  return compact ? (
    <OverlayScrollbarsComponent {...rest}>
      {children}
    </OverlayScrollbarsComponent>
  ) : (
    <Box
      position={"relative"}
      width={"100%"}
      height={"100%"}
      border={debug ? "6px solid red" : undefined}
    >
      <Box position={"absolute"} inset={0}>
        <OverlayScrollbarsComponent {...rest}>
          {children}
        </OverlayScrollbarsComponent>
      </Box>
    </Box>
  );
};

Listening to the scroll event:

<Scroll
  style={{
    maxHeight: "300px",
  }}
  compact
  events={{
    scroll: (e) => {
      console.log(e.state()); // Doesn't seem to update
      console.log(e.elements().scrollbarHorizontal.handle.style.transform); // It updates
    },
  }}
>
  <ScrollContent />
</Scroll>

[KingSora]

Good day @artpumpkin

Do you want specifically the transform values for the axis or the percentage of your current scroll offset of either axis? Because there is a difference depending on your scrollbars handles min / max size.

[artpumpkin]

Thanks for the quick reply @KingSora, I'm more interested on the percentage value of either handles, I'm trying to show a shadow if the scroll has started since I'm using sticky position on a table column, I would like to improve the UX by showing the shadow if the horizontal scroll is greater than a x%.

[KingSora]

@artpumpkin would something like this be enough: https://stackblitz.com/edit/stackblitz-starters-rp7vvz?file=src%2FApp.tsx It really just tracks the scroll percentages and not really the handle percentages (so not exactly what you want) but I guess you could still use the code as a starting point

[artpumpkin]

Thank you so much @KingSora, that's a great starting point for me, thanks for your time again!