How to get properly scroll amount on react

[gilvex]

Hey there I'm trying to get "scroll" amount from useEventObserver but it seems that it doesn't work in no way. Event "updated" work

Here's code (it's taken from example and slightly modified)

"use client";

import { useEffect, useRef, useState } from "react";
import {
  OverlayScrollbarsComponent,
  useOverlayScrollbars,
} from "overlayscrollbars-react";
import type { OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
import type { EventListenerArgs } from "overlayscrollbars";

export type OverlayScrollbarsEvents = keyof EventListenerArgs;

export interface EventObserverEvent {
  active: boolean;
  count: number;
}

export const useEventObserver = () => {
  const [activeEvents, setActiveEvents] = useState<OverlayScrollbarsEvents[]>(
    [],
  );
  const eventCountRef = useRef<
    Partial<Record<OverlayScrollbarsEvents, number>>
  >({});
  const timeoutIds = useRef<
    Partial<Record<OverlayScrollbarsEvents, ReturnType<typeof setTimeout>>>
  >({});

  const activateEvent = (event: OverlayScrollbarsEvents) => {
    const currAmount = eventCountRef.current[event];
    eventCountRef.current[event] =
      typeof currAmount === "number" ? currAmount + 1 : 1;

    setActiveEvents((currActiveEvents) =>
      Array.from(new Set([...currActiveEvents, event])),
    );

    clearTimeout(timeoutIds.current[event]);
    timeoutIds.current[event] = setTimeout(() => {
      setActiveEvents((currActiveEvents) => {
        const currActiveEventsSet = new Set(currActiveEvents);
        currActiveEventsSet.delete(event);
        return Array.from(currActiveEventsSet);
      });
    }, 500);
  };

  const getEventObj = (event: OverlayScrollbarsEvents): EventObserverEvent => ({
    active: activeEvents.includes(event),
    count: eventCountRef.current[event] ?? 0,
  });

  const events: Record<OverlayScrollbarsEvents, EventObserverEvent> = {
    initialized: getEventObj("initialized"),
    destroyed: getEventObj("destroyed"),
    updated: getEventObj("updated"),
    scroll: getEventObj("scroll"),
  };

  return [events, activateEvent] as const;
};

export function OverlayScrollbarsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const osRef = useRef<OverlayScrollbarsComponentRef>(null);
  const [activeEvents, activateEvent] = useEventObserver();
  const [initBodyOverlayScrollbars] = useOverlayScrollbars({
    defer: true,
    options: {
      scrollbars: {
        theme: "os-theme-light",
      },
    },
  });

  useEffect(() => {
    console.log(document.body);
    initBodyOverlayScrollbars(document.body);
  }, [initBodyOverlayScrollbars]);

  console.log("OverlayScrollbarsComponent.client.provider", activeEvents);

  return (
    <OverlayScrollbarsComponent
      className="overlayscrollbars-react"
      ref={osRef}
      options={{
        scrollbars: { theme: "os-theme-light" },
      }}
      events={{
        initialized: () => activateEvent("initialized"),
        destroyed: () => activateEvent("destroyed"),
        updated: () => activateEvent("updated"),
        scroll: () => activateEvent("scroll"),
      }}
      defer
    >
      {children}
    </OverlayScrollbarsComponent>
  );
}

I'm using NextJS and trying to get state of scroll in my child components (such as navbar) yet it doesn't works too (throws undefined)

[gilvex]

Don't know how but it magically solved itself xd

[KingSora]

Glad to hear.. sorry for the late reply but I completely forgot about this

[gilvex]

It's okay I found out that window.scrollY works as fine tho I'd really love to see more simplified example for React (it looks messy with useEventObserver and etc)