diff --git a/commafeed-client/src/app/constants.ts b/commafeed-client/src/app/constants.ts
index 82853732..9fa9df8a 100644
--- a/commafeed-client/src/app/constants.ts
+++ b/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",
diff --git a/commafeed-client/src/app/slices/entries.ts b/commafeed-client/src/app/slices/entries.ts
index b94c4284..b9b1d15b 100644
--- a/commafeed-client/src/app/slices/entries.ts
+++ b/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<
diff --git a/commafeed-client/src/app/utils.ts b/commafeed-client/src/app/utils.ts
index 0b72a831..ba31235f 100644
--- a/commafeed-client/src/app/utils.ts
+++ b/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)
diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx
index f66f26f6..53e91703 100644
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -74,8 +74,6 @@ export function FeedEntries() {
const swipedRight = (entry: ExpendableEntry) => dispatch(markEntry({ entry, read: !entry.read }))
useEffect(() => {
- const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
-
const listener = () => {
if (viewMode !== "expanded") return
if (scrollingToEntry) return
@@ -100,8 +98,8 @@ export function FeedEntries() {
}
}
const throttledListener = throttle(100, listener)
- scrollArea?.addEventListener("scroll", throttledListener)
- return () => scrollArea?.removeEventListener("scroll", throttledListener)
+ window.addEventListener("scroll", throttledListener)
+ return () => window.removeEventListener("scroll", throttledListener)
}, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
useMousetrap("r", () => dispatch(reloadEntries()))
@@ -154,9 +152,8 @@ export function FeedEntries() {
})
)
} else {
- const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
- scrollArea?.scrollTo({
- top: scrollArea.scrollTop + scrollArea.clientHeight * 0.8,
+ window.scrollTo({
+ top: window.scrollY + document.documentElement.clientHeight * 0.8,
behavior: "smooth",
})
}
@@ -193,9 +190,8 @@ export function FeedEntries() {
})
)
} else {
- const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
- scrollArea?.scrollTo({
- top: scrollArea.scrollTop - scrollArea.clientHeight * 0.8,
+ window.scrollTo({
+ top: window.scrollY - document.documentElement.clientHeight * 0.8,
behavior: "smooth",
})
}
@@ -267,8 +263,6 @@ export function FeedEntries() {
loadMore={() => dispatch(loadMoreEntries())}
hasMore={hasMore}
loader={