diff --git a/app/lib/replay/Recording.ts b/app/lib/replay/Recording.ts index 3a3e0ab2..9d535ecd 100644 --- a/app/lib/replay/Recording.ts +++ b/app/lib/replay/Recording.ts @@ -312,6 +312,25 @@ function addRecordingMessageHandler(messageHandlerId: string) { { capture: true, passive: true }, ); + window.addEventListener( + 'scroll', + (event) => { + const target = event.target == window.document ? undefined : (event.target as Element); + const selector = target ? computeSelector(target) : undefined; + + addInteraction({ + kind: 'scroll', + time: Date.now() - startTime, + selector, + windowScrollX: window.scrollX, + windowScrollY: window.scrollY, + targetScrollX: target?.scrollLeft, + targetScrollY: target?.scrollTop, + }); + }, + { capture: true, passive: true }, + ); + function onInterceptedOperation(name: string) { console.log(`InterceptedOperation ${name}`); } diff --git a/app/lib/replay/SimulationData.ts b/app/lib/replay/SimulationData.ts index bc58c457..5de4a15f 100644 --- a/app/lib/replay/SimulationData.ts +++ b/app/lib/replay/SimulationData.ts @@ -47,7 +47,7 @@ interface SimulationPacketResource { resource: NetworkResource; } -export type UserInteractionKind = 'click' | 'pointermove' | 'keydown'; +export type UserInteractionKind = 'click' | 'pointermove' | 'keydown' | 'scroll'; export interface UserInteraction { kind: UserInteractionKind; @@ -55,8 +55,8 @@ export interface UserInteraction { // Elapsed time when the interaction occurred. time: number; - // Selector of the element associated with the interaction. - selector: string; + // Selector of the element associated with the interaction, if any. + selector?: string; // For mouse interactions, dimensions and position within the // element where the event occurred. @@ -69,6 +69,12 @@ export interface UserInteraction { // For keydown interactions, the key pressed. key?: string; + + // For scroll interactions, the scroll position of the window and the targeted element. + windowScrollX?: number; + windowScrollY?: number; + targetScrollX?: number; + targetScrollY?: number; } interface SimulationPacketInteraction {