Fix pseudo-element anchors with overflow: scroll; parents

index.html

@@ -777,7 +777,13 @@ <h2>
         Pseudo-element anchor
       </h2>
       <div style="position: relative" class="demo-elements">
-        <div id="my-anchor-pseudo-element" class="anchor">Anchor</div>
+        <div class="scroll-container">
+          <div class="placefiller-above-anchor"></div>
+          <div class="placefiller-before-anchor"></div>
+          <span id="my-anchor-pseudo-element" class="anchor">Anchor</span>
+          <div class="placefiller-after-anchor"></div>
+        </div>
+
         <div id="my-target-pseudo-element" class="target">Target</div>
       </div>
       <p class="note">

src/validate.ts

@@ -9,6 +9,20 @@
   removeFakePseudoElement(): void;
 }
 
+function findFirstScrollingElement(element: HTMLElement) {
+  let currentElement: HTMLElement | null = element;
+
+  while (currentElement) {
+    if (hasStyle(currentElement, 'overflow', 'scroll')) {
+      return currentElement;
+    }
+
+    currentElement = currentElement.parentElement;
+  }
+
+  return currentElement;
+}
+
 /**
   Like `document.querySelectorAll`, but if the selector has a pseudo-element
   it will return a wrapper for the rest of the polyfill to use.
@@ -64,16 +78,33 @@
         element.insertAdjacentElement('beforeend', fakePseudoElement);
       }
 
-      const startingScrollY = window.scrollY;
-      const startingScrollX = window.scrollX;
       const boundingClientRect = fakePseudoElement.getBoundingClientRect();
 
+      const { scrollY: startingScrollY, scrollX: startingScrollX } = globalThis;
+      let firstScrollingElement: {
+        scrollTop: number;
+        scrollLeft: number;
+      } | null = findFirstScrollingElement(element);
+
+      // Avoid doubled scroll
+      if (firstScrollingElement === document.documentElement) {
+        firstScrollingElement = null;
+      }
+
+      firstScrollingElement ??= { scrollTop: 0, scrollLeft: 0 };
+
+      const { scrollTop: startingScrollTop, scrollLeft: startingScrollLeft } =
+        firstScrollingElement;
+
       result.push({
         // Passed to `isAcceptableAnchorElement`.
         fakePseudoElement,
         // For testing.
         computedStyle,
 
+        // For https://floating-ui.com/docs/autoupdate#ancestorscroll to work on `VirtualElement`s.
+        contextElement: element,
+
         // For `validatedForPositioning` to "undo" the "fake pseudo-element" after it's been used.
         removeFakePseudoElement() {
           fakePseudoElement.remove();
@@ -82,11 +113,19 @@
 
         // https://floating-ui.com/docs/virtual-elements.
         getBoundingClientRect() {
-          // NOTE this only takes into account viewport scroll and not any of it's parents,
-          // traversing parents on each scroll event would be expensive.
+          const { scrollY, scrollX } = globalThis;
+          const { scrollTop, scrollLeft } = firstScrollingElement;
+
           return DOMRect.fromRect({
-            x: boundingClientRect.x - (window.scrollX - startingScrollX),
-            y: boundingClientRect.y - (window.scrollY - startingScrollY),
+            y:
+              boundingClientRect.y +
+              (startingScrollY - scrollY) +
+              (startingScrollTop - scrollTop),
+            x:
+              boundingClientRect.x +
+              (startingScrollX - scrollX) +
+              (startingScrollLeft - scrollLeft),
+
             width: boundingClientRect.width,
             height: boundingClientRect.height,
           });
@@ -243,7 +282,7 @@
     }
   }
 
   // TODO el is in scope for query el, per the effects of anchor-scope on query el or its ancestors.
 
   return true;
 }