Fix issue with elements not triggering intersection when within positioned: fixed element (#280)

Author: david-tejada

src/content/actions/scroll.ts

@@ -15,7 +15,7 @@ declare global {
 	}
 }
 
-let lastScrollContainer: HTMLElement | undefined;
+let lastScrollContainer: Element | undefined;
 let lastScrollFactor: number;
 
 interface ScrollOptions {
@@ -284,7 +284,7 @@ export function snapScroll(
 export function scroll(options: ScrollOptions) {
 	const { dir, target } = options;
 	let factor = options.factor;
-	let scrollContainer: HTMLElement | undefined;
+	let scrollContainer: Element | undefined;
 	const direction =
 		dir === "left" || dir === "right" ? "horizontal" : "vertical";
 

src/content/utils/getUserScrollableContainer.ts

@@ -1,9 +1,14 @@
 const containersCache: Map<Element, HTMLElement> = new Map();
 
+/**
+ * Given an Element return the Element that contains it and might scroll it. It
+ * doesn't necessarily mean that the container scrolls, but if it does, the
+ * given element would scroll with it.
+ */
 export function getUserScrollableContainer(
 	element: Element,
 	direction?: "vertical" | "horizontal"
-): HTMLElement {
+) {
 	const elementPosition = window.getComputedStyle(element).position;
 
 	const checked = [];
@@ -16,6 +21,10 @@ export function getUserScrollableContainer(
 		const { position, overflowX, overflowY } = window.getComputedStyle(current);
 		const { scrollWidth, clientWidth, scrollHeight, clientHeight } = current;
 
+		if (position === "fixed") {
+			return current;
+		}
+
 		// If the element is position: absolute we need to ignore any element with
 		// position: static as our element won't scroll with that container
 		if (elementPosition === "absolute" && position === "static") {

src/typings/ElementWrapper.ts

@@ -20,7 +20,7 @@ export interface ElementWrapper {
 
 	// These properties are only needed for hintables
 	intersectionObserver?: BoundedIntersectionObserver;
-	userScrollableContainer?: HTMLElement;
+	userScrollableContainer?: Element;
 	effectiveBackgroundColor?: string;
 	hint?: Hint;