fix: (regression beta) continuous-scrolling not working if paged list is shorter than the screen
Massimo Melina committed
Mar 16, 2026 at 12:09 UTC
919cd252b9b546bae7f418494f1508a7c0ade71a
1 file changed
+15
-3
frontend/src/BrowseFiles.ts
+15
-3
@@ -55,7 +55,7 @@ export function BrowseFiles() {
55
props?.comment && h('div', { className: 'entry-comment' }, props.comment),
56
error ? h(ErrorMsg, { err: error }) : h(FilesList),
57
h(CustomCode, { name: 'afterList' }),
58
- h('div', { style: { flex: 1 }}),
58
+ h('div', { id: 'afterListFiller', style: { flex: 1 }}),
59
h(ClipBar),
60
h(CustomCode, { name: 'footer' }),
61
)
@@ -94,13 +94,25 @@ function FilesList() {
94
setAtBottom(window.innerHeight + Math.ceil(window.scrollY) >= document.body.offsetHeight)
95
}, 200),
96
[])
97
+ const canAddPage = page + extraPages < nPages - 1
98
useEffect(() => domOn('scroll', () => {
99
if (!theList.length) return
100
const timeToAdd = window.innerHeight * 1.3 + window.scrollY >= document.body.offsetHeight // 30vh before the end
100
- if (timeToAdd && page + extraPages < nPages -1)
101
+ if (timeToAdd && canAddPage)
102
setExtraPages(extraPages+1)
103
calcScrolledPages()
103
- }), [page, extraPages, nPages])
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
106
+ const { height: windowHeight } = useWindowSize()
107
+ useEffect(() => {
108
+ const filler = document.getElementById('afterListFiller')
109
+ const wrapper = filler?.closest('.list-wrapper') as HTMLElement | null
110
+ if (!filler || !wrapper) return
111
+ // when the after-list filler is still stretching, we add a tiny bottom padding so the page can overflow and trigger scrolling
112
+ const shouldPad = canAddPage && filler.getBoundingClientRect().height > 0
113
+ wrapper.style.paddingBottom = shouldPad ? '10px' : ''
114
+ return () => { wrapper.style.paddingBottom = '' }
115
+ }, [canAddPage, windowHeight, total, page, extraPages])
116
117
// type to focus
118
const [focus, setFocus] = useState('')