Make highlight overlays sticky on nonstandard scrolling

src/utils/each-frame.ts

@@ -0,0 +1,32 @@
+// Runs func once (deduplicated) per frame until duration is over
+// Returned function resets timer
+export function toRunEachFrame<T extends (...args: any[]) => any>(func: T, duration: number, finalCallDelay?: number): (...args: Parameters<T>) => void {
+    let endTime: number | null = null;
+    let callbackId: number | null = null;
+
+    function applyIfNotEnded(timestamp: number) {
+        if (!endTime) {
+            endTime = timestamp + duration;
+        }
+        if (timestamp < endTime) {
+            func();
+            callbackId = requestAnimationFrame(applyIfNotEnded);
+        } else {
+            if (finalCallDelay !== undefined) {
+                setTimeout(func, finalCallDelay);
+            }
+        }
+    }
+
+    function resetEndTime() {
+        if (callbackId != null) {
+            cancelAnimationFrame(callbackId);
+        }
+        if (endTime != null) {
+            endTime = null;
+        }
+        callbackId = requestAnimationFrame(applyIfNotEnded);
+    }
+
+    return resetEndTime;
+}

src/utils/highlighter-overlays.ts

@@ -11,6 +11,7 @@ import {
 	updateHighlighterMenu
 } from './highlighter';
 import { throttle } from './throttle';
+import { toRunEachFrame } from './each-frame';
 import { getElementByXPath, isDarkColor } from './dom-utils';
 
 let hoverOverlay: HTMLElement | null = null;
@@ -340,6 +341,53 @@ observer.observe(document.body, {
 	characterData: false
 });
 
+function watchScrollableElements() {
+	const isScrollable = (element: Element) => {
+		const style = window.getComputedStyle(element);
+		return style.overflowY === 'auto' || style.overflowY === 'scroll' || style.overflowX === 'auto' || style.overflowX === 'scroll';
+	}
+
+	// 200ms duration required for long custom scrolling animations (e.g. Grok)
+	const updateHighlightsEachFrame = toRunEachFrame(updateHighlightOverlayPositions, 200, 1000);
+
+	const handleScroll = () => {
+		updateHighlightsEachFrame();
+	}
+
+	const setupEventListeners = (element: Element) => {
+		element.addEventListener('scroll', handleScroll);
+		element.addEventListener('wheel', handleScroll);
+		element.addEventListener('touchmove', handleScroll);
+	}
+
+	document.querySelectorAll('*').forEach((element: Element) => {
+		if (isScrollable(element)) {
+			setupEventListeners(element);
+		}
+	})
+
+	const scrollableElementsObserver = new MutationObserver((mutations) => {
+		mutations.forEach((mutation) => {
+			if (mutation.type == 'childList') {
+				Array.from(mutation.addedNodes).forEach((node) => {
+					if (node instanceof Element && isScrollable(node)) {
+						setupEventListeners(node);
+					}
+				});
+			} else if (mutation.type == 'attributes') {
+				if (mutation.attributeName == 'style' && mutation.target instanceof Element && isScrollable(mutation.target)) {
+					setupEventListeners(mutation.target);
+				}
+			}
+
+		});
+	});
+
+	scrollableElementsObserver.observe(document.body, { childList: true, attributes: true, subtree: true });
+}
+
+watchScrollableElements()
+
 // Create or update the hover overlay used to indicate which element will be highlighted
 function createOrUpdateHoverOverlay(target: Element) {
 	// Only update if the target has changed