fix scroll value and record viewport when loaded

src/record/index.ts

@@ -1,6 +1,6 @@
 import { snapshot } from 'rrweb-snapshot';
 import initObservers from './observer';
-import { mirror, on } from '../utils';
+import { mirror, on, getWindowWidth, getWindowHeight } from '../utils';
 import {
   EventType,
   event,
@@ -36,7 +36,12 @@ function record(options: recordOptions = {}) {
     on(
       'load',
       () => {
-        emit(wrapEvent({ type: EventType.Load, data: {} }));
+        emit(
+          wrapEvent({
+            type: EventType.Load,
+            data: { width: getWindowWidth(), height: getWindowHeight() },
+          }),
+        );
         const [node, idNodeMap] = snapshot(document);
         if (!node) {
           return console.warn('Failed to snapshot the document');

src/record/observer.ts

@@ -1,5 +1,12 @@
 import { INode, serializeNodeWithId } from 'rrweb-snapshot';
-import { mirror, throttle, on, hookSetter } from '../utils';
+import {
+  mirror,
+  throttle,
+  on,
+  hookSetter,
+  getWindowHeight,
+  getWindowWidth,
+} from '../utils';
 import {
   mutationCallBack,
   textMutation,
@@ -183,14 +190,14 @@ function initScrollObserver(cb: scrollCallback): listenerHandler {
     if (evt.target === document) {
       cb({
         id,
-        x: document.documentElement.scrollTop,
+        x: document.documentElement.scrollLeft,
-        y: document.documentElement.scrollLeft,
+        y: document.documentElement.scrollTop,
       });
     } else {
       cb({
         id,
-        x: (evt.target as HTMLElement).scrollTop,
+        x: (evt.target as HTMLElement).scrollLeft,
-        y: (evt.target as HTMLElement).scrollLeft,
+        y: (evt.target as HTMLElement).scrollTop,
       });
     }
   }, 100);
@@ -201,14 +208,8 @@ function initViewportResizeObserver(
   cb: viewportResizeCallback,
 ): listenerHandler {
   const updateDimension = throttle(() => {
-    const height =
+    const height = getWindowHeight();
-      window.innerHeight ||
+    const width = getWindowWidth();
-      (document.documentElement && document.documentElement.clientHeight) ||
-      (document.body && document.body.clientHeight);
-    const width =
-      window.innerWidth ||
-      (document.documentElement && document.documentElement.clientWidth) ||
-      (document.body && document.body.clientWidth);
     cb({
       width: Number(width),
       height: Number(height),

src/types.ts

@@ -16,7 +16,10 @@ export type domContentLoadedEvent = {
 
 export type loadedEvent = {
   type: EventType.Load;
-  data: {};
+  data: {
+    width: number;
+    height: number;
+  };
 };
 
 export type fullSnapshotEvent = {

src/utils.ts

@@ -79,3 +79,19 @@ export function hookSetter<T>(
   });
   return () => hookSetter(target, key, original || {});
 }
+
+export function getWindowHeight(): number {
+  return (
+    window.innerHeight ||
+    (document.documentElement && document.documentElement.clientHeight) ||
+    (document.body && document.body.clientHeight)
+  );
+}
+
+export function getWindowWidth(): number {
+  return (
+    window.innerWidth ||
+    (document.documentElement && document.documentElement.clientWidth) ||
+    (document.body && document.body.clientWidth)
+  );
+}