remove ScrollArea as it causes performance issues on chrome (#1087)

commafeed-client/src/app/constants.ts

@@ -94,7 +94,6 @@ export const Constants = {
         isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
     },
     dom: {
-        mainScrollAreaId: "main-scroll-area-id",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
     },
     browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",

commafeed-client/src/app/slices/entries.ts

@@ -204,18 +204,14 @@ export const selectEntry = createAsyncThunk<
     }
 })
 const scrollToEntry = (entryElement: HTMLElement, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
-    const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
-    if (scrollArea) {
-        scrollToWithCallback({
-            element: scrollArea,
-            options: {
-                // add a small gap between the top of the content and the top of the page
-                top: entryElement.offsetTop - 3,
-                behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
-            },
-            onScrollEnded,
-        })
-    }
+    scrollToWithCallback({
+        options: {
+            // add a small gap between the top of the content and the top of the page
+            top: entryElement.offsetTop - Constants.layout.headerHeight - 3,
+            behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
+        },
+        onScrollEnded,
+    })
 }
 
 export const selectPreviousEntry = createAsyncThunk<

commafeed-client/src/app/utils.ts

@@ -26,30 +26,22 @@ export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?:
     return { width: placeholderWidth, height: placeholderHeight }
 }
 
-export const scrollToWithCallback = ({
-    element,
-    options,
-    onScrollEnded,
-}: {
-    element: HTMLElement
-    options: ScrollToOptions
-    onScrollEnded: () => void
-}) => {
+export const scrollToWithCallback = ({ options, onScrollEnded }: { options: ScrollToOptions; onScrollEnded: () => void }) => {
     const offset = (options.top ?? 0).toFixed()
 
     const onScroll = () => {
-        if (element.offsetTop.toFixed() === offset) {
-            element.removeEventListener("scroll", onScroll)
+        if (window.scrollY.toFixed() === offset) {
+            window.removeEventListener("scroll", onScroll)
             onScrollEnded()
         }
     }
 
-    element.addEventListener("scroll", onScroll)
+    window.addEventListener("scroll", onScroll)
 
     // scrollTo does not trigger if there's nothing to do, trigger it manually
     onScroll()
 
-    element.scrollTo(options)
+    window.scrollTo(options)
 }
 
 export const truncate = (str: string, n: number) => (str.length > n ? `${str.slice(0, n - 1)}\u2026` : str)