Save scrolling interactions (#26)

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}`);
   }

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 {