diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index 4b1d210be..5f78788c7 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -1,5 +1,5 @@
 import { h, Fragment } from 'preact';
-import { useCallback, useState, useEffect } from 'preact/hooks';
+import { useCallback, useState, useEffect, useRef } from 'preact/hooks';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
 import Clip from '../icons/Clip';
@@ -11,7 +11,7 @@ import Heading from '../components/Heading';
 import VideoPlayer from '../components/VideoPlayer';
 import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
 
-export default function Event({ eventId, close, scrollIntoView }) {
+export default function Event({ eventId, close, scrollRef }) {
   const apiHost = useApiHost();
   const { data, status } = useEvent(eventId);
   const [showDialog, setShowDialog] = useState(false);
@@ -20,8 +20,15 @@ export default function Event({ eventId, close, scrollIntoView }) {
 
   useEffect(() => {
     // Call Events.js scroll when this event has been mounted.
-    scrollIntoView(eventId);
-  }, [scrollIntoView, eventId]);
+    // scrollIntoView(eventId);
+    scrollToElement();
+  }, [data]);
+
+  const scrollToElement = useCallback(() => {
+    if (scrollRef && scrollRef[eventId]) {
+      scrollRef[eventId].scrollIntoView();
+    }
+  }, [scrollRef]);
 
   const handleClickDelete = () => {
     setShowDialog(true);
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index cd4896f0f..73d947aed 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -80,6 +80,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     }
 
     if (data && Array.isArray(data) && data.length + deleted < limit) {
+      console.log('reached end');
       dispatch({ type: 'REACHED_END', meta: { searchString } });
     }
   }, [data, limit, searchString, searchStrings, deleted]);
@@ -129,12 +130,6 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     setViewEvent(id);
   };
 
-  // Called from the mounted event.js to prevent
-  // race condition between scollIntoView and if component has been mounted.
-  const scrollIntoView = (id) => {
-    if (id in scrollToRef) scrollToRef[id].scrollIntoView();
-  };
-
   const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
 
   return (
@@ -224,7 +219,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
                     {viewEvent === id ? (
                       <Tr className="border-b-1">
                         <Td colSpan="8">
-                          <Event scrollIntoView={scrollIntoView} eventId={id} close={() => setViewEvent(null)} />
+                          <Event eventId={id} close={() => setViewEvent(null)} scrollRef={scrollToRef} />
                         </Td>
                       </Tr>
                     ) : null}