concertina 0.1.2 → 0.3.0

package/dist/index.cjs

@@ -34,10 +34,24 @@ function pinToScrollTop(el) {
   let parent = el.parentElement;
   while (parent) {
     const { overflowY } = getComputedStyle(parent);
-    if (overflowY === "auto" || overflowY === "scroll") {
+    if ((overflowY === "auto" || overflowY === "scroll") && parent.scrollHeight > parent.clientHeight) {
       const box = parent.getBoundingClientRect();
       const target = el.getBoundingClientRect();
-      parent.scrollTop += target.top - box.top;
+      let stickyOffset = 0;
+      const measure = (node) => {
+        const s = getComputedStyle(node);
+        if (s.position === "sticky") {
+          stickyOffset = Math.max(
+            stickyOffset,
+            (parseFloat(s.top) || 0) + node.getBoundingClientRect().height
+          );
+        }
+      };
+      for (const child of parent.children) {
+        measure(child);
+        for (const gc of child.children) measure(gc);
+      }
+      parent.scrollTop += target.top - box.top - stickyOffset;
       return;
     }
     parent = parent.parentElement;

package/dist/index.d.cts

@@ -28,11 +28,15 @@ interface UseConcertinaReturn {
 declare function useConcertina(): UseConcertinaReturn;
 
 /**
- * Scroll `el` to the top of its nearest scrollable ancestor.
+ * Scroll `el` to the top of its nearest scrollable ancestor,
+ * clearing any sticky headers. Only adjusts one container's
+ * scrollTop. Never cascades to the viewport, which matters on
+ * mobile where scrollIntoView pulls the whole page.
  *
- * Only adjusts one container's scrollTop. Never cascades to the
- * viewport, which matters on mobile where scrollIntoView pulls
- * the whole page.
+ * Skips elements that have overflow: auto/scroll in CSS but
+ * don't actually scroll (scrollHeight <= clientHeight). Without
+ * this check, a non-scrolling ancestor with overflow-auto traps
+ * the walk and the real scroll container never gets adjusted.
  */
 declare function pinToScrollTop(el: HTMLElement | null): void;
 

package/dist/index.d.ts

@@ -28,11 +28,15 @@ interface UseConcertinaReturn {
 declare function useConcertina(): UseConcertinaReturn;
 
 /**
- * Scroll `el` to the top of its nearest scrollable ancestor.
+ * Scroll `el` to the top of its nearest scrollable ancestor,
+ * clearing any sticky headers. Only adjusts one container's
+ * scrollTop. Never cascades to the viewport, which matters on
+ * mobile where scrollIntoView pulls the whole page.
  *
- * Only adjusts one container's scrollTop. Never cascades to the
- * viewport, which matters on mobile where scrollIntoView pulls
- * the whole page.
+ * Skips elements that have overflow: auto/scroll in CSS but
+ * don't actually scroll (scrollHeight <= clientHeight). Without
+ * this check, a non-scrolling ancestor with overflow-auto traps
+ * the walk and the real scroll container never gets adjusted.
  */
 declare function pinToScrollTop(el: HTMLElement | null): void;
 

package/dist/index.js

@@ -13,10 +13,24 @@ function pinToScrollTop(el) {
   let parent = el.parentElement;
   while (parent) {
     const { overflowY } = getComputedStyle(parent);
-    if (overflowY === "auto" || overflowY === "scroll") {
+    if ((overflowY === "auto" || overflowY === "scroll") && parent.scrollHeight > parent.clientHeight) {
       const box = parent.getBoundingClientRect();
       const target = el.getBoundingClientRect();
-      parent.scrollTop += target.top - box.top;
+      let stickyOffset = 0;
+      const measure = (node) => {
+        const s = getComputedStyle(node);
+        if (s.position === "sticky") {
+          stickyOffset = Math.max(
+            stickyOffset,
+            (parseFloat(s.top) || 0) + node.getBoundingClientRect().height
+          );
+        }
+      };
+      for (const child of parent.children) {
+        measure(child);
+        for (const gc of child.children) measure(gc);
+      }
+      parent.scrollTop += target.top - box.top - stickyOffset;
       return;
     }
     parent = parent.parentElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "concertina",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "React hook for scroll-pinned Radix Accordion panels. Zero dependencies.",
   "type": "module",
   "main": "./dist/index.cjs",