make ScrollContainer work with other elements in the page

Author: huzaifah0x00

src/ScrollContainer.tsx

@@ -36,16 +36,19 @@ const ScrollContainer: FC<ScrollContainerProps> = (props) => {
   const scrollParent = _scrollParent || _window;
 
   const [scrollData, setScrollData] = useState<ScrollData>(initialScrollData);
+  const containerRef = useRef<HTMLDivElement>(null);
   const scrollTimer = useRef<ReturnType<typeof setTimeout>>();
 
   const scrollEvent = useCallback(() => {
     if (snap !== "none" && scrollTimer.current)
       clearTimeout(scrollTimer.current);
 
-    const currentY: number =
-      scrollParent === window
-        ? window.pageYOffset
-        : (scrollParent as HTMLElement).scrollTop;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const currentScrollTop = scrollParent === window ? window.pageYOffset : (scrollParent as HTMLElement).scrollTop;
+    const offsetTop = container.getBoundingClientRect().top + currentScrollTop;
+    const currentY: number = currentScrollTop - offsetTop;
     const viewportHeight: number =
       scrollParent === window
         ? environment.height
@@ -82,7 +85,7 @@ const ScrollContainer: FC<ScrollContainerProps> = (props) => {
 
         if (newCurrentY !== currentY)
           window.scrollTo({
-            top: newCurrentY,
+            top: newCurrentY + offsetTop,
             behavior: "smooth",
           });
       }, 50);
@@ -94,12 +97,16 @@ const ScrollContainer: FC<ScrollContainerProps> = (props) => {
       scrollEvent();
       scrollParent.addEventListener("scroll", scrollEvent);
       scrollParent.addEventListener("resize", scrollEvent);
-      return () => scrollParent.removeEventListener("scroll", scrollEvent);
+      return () => {
+        scrollParent.removeEventListener("scroll", scrollEvent);
+        scrollParent.removeEventListener("resize", scrollEvent);
+      };
     }
   }, [scrollEvent, scrollParent]);
 
   return (
     <div
+      ref={containerRef}
       style={{ margin: 0, padding: 0, userSelect: "none", ...style }}
       className={className}
     >