fix(ui): prevent header bounce on scroll bottom

- Detect bottom overscroll using scrollHeight/clientHeight

- Ignore scroll-up events when near bottom to prevent header popping

Author: joekiller

example-web/react2/src/components/ReactWindowMock.tsx

@@ -22,7 +22,11 @@ export const FixedSizeList = ({ children, itemCount, itemSize, height, width, on
         <div
             ref={ref}
             style={{ height, width, overflow: "auto", position: 'relative' }}
-            onScroll={(e) => onScroll && onScroll({ scrollOffset: e.currentTarget.scrollTop })}
+            onScroll={(e) => onScroll && onScroll({
+                scrollOffset: e.currentTarget.scrollTop,
+                scrollHeight: e.currentTarget.scrollHeight,
+                clientHeight: e.currentTarget.clientHeight
+            })}
         >
             {items}
             {bottomPadding > 0 && <div style={{ height: bottomPadding }} />}
@@ -64,7 +68,11 @@ export const FixedSizeGrid = ({ children, columnCount, rowCount, columnWidth, ro
         <div
             ref={ref}
             style={{ height, width, overflowY: "auto", overflowX: "hidden", position: 'relative', ...style }}
-            onScroll={(e) => onScroll && onScroll({ scrollTop: e.currentTarget.scrollTop })}
+            onScroll={(e) => onScroll && onScroll({
+                scrollTop: e.currentTarget.scrollTop,
+                scrollHeight: e.currentTarget.scrollHeight,
+                clientHeight: e.currentTarget.clientHeight
+            })}
         >
             <div style={{ height: rowCount * rowHeight + bottomPadding, width: columnWidth * columnCount }}>
                 {items}

example-web/react2/src/hooks/useCollapsibleHeader.ts

@@ -16,7 +16,7 @@ export const useCollapsibleHeader = (options: UseCollapsibleHeaderOptions = {})
     const lastScrollTop = useRef(0);
     const scrollRef = useRef<number>(0);
 
-    const handleScroll = ({ scrollOffset, scrollTop }: { scrollOffset?: number, scrollTop?: number }) => {
+    const handleScroll = ({ scrollOffset, scrollTop, scrollHeight, clientHeight }: { scrollOffset?: number, scrollTop?: number, scrollHeight?: number, clientHeight?: number }) => {
         if (disabled) {
             setShowHeader(true);
             return;
@@ -25,14 +25,25 @@ export const useCollapsibleHeader = (options: UseCollapsibleHeaderOptions = {})
         const currentScrollTop = scrollTop ?? scrollOffset ?? 0;
         const scrollDelta = currentScrollTop - lastScrollTop.current;
 
+        // Bounce Protection: Detect if we are near the bottom
+        // If we are at the bottom, a "scroll up" might be a bounce.
+        let isNearBottom = false;
+        if (scrollHeight && clientHeight) {
+            // Buffer of 100px to be safe
+            isNearBottom = (currentScrollTop + clientHeight) >= (scrollHeight - 100);
+        }
+
         // Threshold to prevent jitter
         if (Math.abs(scrollDelta) > threshold) {
             if (scrollDelta > 0 && currentScrollTop > triggerStart) {
                 // Scrolling Down & checked some distance
                 setShowHeader(false);
             } else if (scrollDelta < 0) {
                 // Scrolling Up
-                setShowHeader(true);
+                // ONLY show header if we are NOT at the very bottom (prevent bounce triggering it)
+                if (!isNearBottom) {
+                    setShowHeader(true);
+                }
             }
         }
         lastScrollTop.current = currentScrollTop;