diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 42b5d2c8..6228d542 100644 --- 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( 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 index 975f8fa3..f4989f10 100644 --- 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 index f52a6bb8..6ff10b27 100644 --- 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 ||