harmonize on a single getWindowScroll (#1054)

* Fix issue where only indication I could see in any attribute that the document was scrolling was on `window.pageYOffset`, so we hadn't been able to replay scrolling * Apply formatting changes * Update observer.ts help you fix typescript error * Update utils.ts help you fix typescript error Co-authored-by: eoghanmurray <[email protected]> Co-authored-by: Yun Feng <[email protected]>
rrweb-io · Jan 9, 2023 · 03821d9 · 03821d9
1 parent 729b8bf
commit 03821d9
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -9,6 +9,7 @@ import {
   on,
   getWindowWidth,
   getWindowHeight,
+  getWindowScroll,
   polyfill,
   hasShadowRoot,
   isSerializedIframe,
@@ -379,22 +380,7 @@ function record<T = eventWithTime>(
         type: EventType.FullSnapshot,
         data: {
           node,
-          initialOffset: {
-            left:
-              window.pageXOffset !== undefined
-                ? window.pageXOffset
-                : document?.documentElement.scrollLeft ||
-                  document?.body?.parentElement?.scrollLeft ||
-                  document?.body?.scrollLeft ||
-                  0,
-            top:
-              window.pageYOffset !== undefined
-                ? window.pageYOffset
-                : document?.documentElement.scrollTop ||
-                  document?.body?.parentElement?.scrollTop ||
-                  document?.body?.scrollTop ||
-                  0,
-          },
+          initialOffset: getWindowScroll(window),
         },
       }),
     );

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -4,6 +4,7 @@ import {
   throttle,
   on,
   hookSetter,
+  getWindowScroll,
   getWindowHeight,
   getWindowWidth,
   isBlocked,
@@ -279,12 +280,12 @@ export function initScrollObserver({
       return;
     }
     const id = mirror.getId(target as Node);
-    if (target === doc) {
-      const scrollEl = (doc.scrollingElement || doc.documentElement)!;
+    if (target === doc && doc.defaultView) {
+      const scrollLeftTop = getWindowScroll(doc.defaultView);
       scrollCb({
         id,
-        x: scrollEl.scrollLeft,
-        y: scrollEl.scrollTop,
+        x: scrollLeftTop.left,
+        y: scrollLeftTop.top,
       });
     } else {
       scrollCb({

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
@@ -167,6 +167,28 @@ export function patch(
   }
 }
 
+export function getWindowScroll(win: Window) {
+  const doc = win.document;
+  return {
+    left: doc.scrollingElement
+      ? doc.scrollingElement.scrollLeft
+      : win.pageXOffset !== undefined
+      ? win.pageXOffset
+      : doc?.documentElement.scrollLeft ||
+        doc?.body?.parentElement?.scrollLeft ||
+        doc?.body?.scrollLeft ||
+        0,
+    top: doc.scrollingElement
+      ? doc.scrollingElement.scrollTop
+      : win.pageYOffset !== undefined
+      ? win.pageYOffset
+      : doc?.documentElement.scrollTop ||
+        doc?.body?.parentElement?.scrollTop ||
+        doc?.body?.scrollTop ||
+        0,
+  };
+}
+
 export function getWindowHeight(): number {
   return (
     window.innerHeight ||