diff --git a/package.json b/package.json index eebdbbb4..3f29d25e 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,9 @@ "typescript": "^3.1.6" }, "dependencies": { + "@types/smoothscroll-polyfill": "^0.3.0", "mitt": "^1.1.3", - "rrweb-snapshot": "^0.6.11" + "rrweb-snapshot": "^0.6.11", + "smoothscroll-polyfill": "^0.4.3" } } diff --git a/src/record/observer.ts b/src/record/observer.ts index 2bbee1e7..53622267 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -272,10 +272,11 @@ function initScrollObserver(cb: scrollCallback): listenerHandler { } const id = mirror.getId(evt.target as INode); if (evt.target === document) { + const scrollEl = (document.scrollingElement || document.documentElement)!; cb({ id, - x: document.documentElement!.scrollLeft, - y: document.documentElement!.scrollTop, + x: scrollEl.scrollLeft, + y: scrollEl.scrollTop, }); } else { cb({ diff --git a/src/replay/index.ts b/src/replay/index.ts index 0cb47fc2..316f525d 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -1,5 +1,6 @@ import { rebuild, buildNodeWithSN } from 'rrweb-snapshot'; import * as mittProxy from 'mitt'; +import * as smoothscroll from 'smoothscroll-polyfill'; import Timer from './timer'; import { EventType, @@ -20,6 +21,8 @@ import { mirror } from '../utils'; import injectStyleRules from './styles/inject-style'; import './styles/style.css'; +smoothscroll.polyfill(); + // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734 // tslint:disable-next-line const mitt = (mittProxy as any).default || mittProxy; @@ -144,6 +147,7 @@ export class Replayer { this.iframe = document.createElement('iframe'); this.iframe.setAttribute('sandbox', 'allow-same-origin'); + this.iframe.setAttribute('scrolling', 'no'); this.wrapper.appendChild(this.iframe); }