fix: weird scrolling behavior when it implies a page change
Massimo Melina committed
Mar 16, 2026 at 13:00 UTC
358624a25d1b21e93cb78f40040e3fb191d8f719
1 file changed
+8
-3
frontend/src/BrowseFiles.ts
+8
-3
@@ -85,7 +85,7 @@ function FilesList() {
85
setScrolledPages(0)
86
}, [page])
87
88
- // infinite scrolling
88
+ // continuous-scrolling
89
const calcScrolledPages = useMemo(() =>
90
_.throttle(() => {
91
const i = _.findLastIndex(document.querySelectorAll('.' + PAGE_SEPARATOR_CLASS), el =>
@@ -102,7 +102,7 @@ function FilesList() {
102
setExtraPages(extraPages+1)
103
calcScrolledPages()
104
}), [page, extraPages, canAddPage])
105
- // when the list is not filling the screen, but we got more pages, introduce an artificial scrolling (via extra padding) so let the user trigger the infinite-scrolling
105
+ // when the list is not filling the screen, but we got more pages, introduce an artificial scrolling (via extra padding) so let the user trigger the continuous-scrolling
106
const { height: windowHeight } = useWindowSize()
107
useEffect(() => {
108
const filler = document.getElementById('afterListFiller')
@@ -259,8 +259,13 @@ const Paging = memo(({ nPages, current, pageSize, changePage, atBottom }: Paging
259
document.body.style.overflowY = 'scroll'
260
return () => { document.body.style.overflowY = '' }
261
}, [])
262
+ const lastScrollTimeRef = useRef(0)
263
+ useEffect(() => domOn('scroll', () => lastScrollTimeRef.current = Date.now()), [])
264
const ref = useRef<HTMLElement>()
263
- useEffect(() => scrollIntoView(ref.current, 'nearest'), [current])
265
+ useEffect(() => { // in case the page changed using the continuous-scrolling, we want to re-center, but only if it happened for a user interaction different from the scrolling
266
+ if (Date.now() - lastScrollTimeRef.current > 500)
267
+ scrollIntoView(ref.current, 'nearest')
268
+ }, [current])
269
const shrink = nPages > 20
270
const from = _.floor(current, -1)
271
const to = from + 10