nicwands/nicwands.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix infinite scroll

Browse source
This commit is contained in:
nicwands 2026-06-02 15:24:52 -04:00
parent 1d4a72da63
commit e219b7fce5
3 changed files with 3 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components.d.ts vendored
View file

@ -11,7 +11,6 @@ export {}
/* prettier-ignore */ /* prettier-ignore */
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
GridViewport: typeof import('./components/GridViewport.vue')['default']
InfiniteScrollContainer: typeof import('./components/InfiniteScrollContainer.vue')['default'] InfiniteScrollContainer: typeof import('./components/InfiniteScrollContainer.vue')['default']
InfiniteScrollDemo: typeof import('./components/InfiniteScrollDemo.vue')['default'] InfiniteScrollDemo: typeof import('./components/InfiniteScrollDemo.vue')['default']
Layout: typeof import('./components/Layout.vue')['default'] Layout: typeof import('./components/Layout.vue')['default']

3
src/components/MosaicViewport.vue
View file

@ -13,7 +13,6 @@
:key="`${viewport.index}-${cell.id}`" :key="`${viewport.index}-${cell.id}`"
@click="openNote(cell.content)" @click="openNote(cell.content)"
> >
<!-- GIF placeholder - you'll replace with actual GIFs -->
<div class="gif-placeholder"> <div class="gif-placeholder">
<div class="gif-info"> <div class="gif-info">
<span class="gif-id">{{ cell.content.id }}</span> <span class="gif-id">{{ cell.content.id }}</span>
@ -23,8 +22,6 @@
}}</span }}</span
> >
</div> </div>
<!-- This would be your actual GIF -->
<!-- <img :src="cell.content.gifUrl" :alt="cell.content.title" /> -->
</div> </div>
</div> </div>
</div> </div>

6
src/composables/useInfiniteScroll.js
View file

@ -164,13 +164,13 @@ export const useInfiniteScroll = (options = {}) => {
} }
const indexes = Array.from(state.viewports.keys()) const indexes = Array.from(state.viewports.keys())
const minIndex = Math.min(...indexes) // const minIndex = Math.min(...indexes)
const maxIndex = Math.max(...indexes) const maxIndex = Math.max(...indexes)
// Calculate total height needed to accommodate all viewports // Calculate total height needed to accommodate all viewports
// Add extra buffer above and below for infinite scroll // Add extra buffer above and below for infinite scroll
const bufferViewports = 10 const bufferViewports = 8
const totalRange = maxIndex - minIndex + 1 + bufferViewports * 2 const totalRange = maxIndex + bufferViewports
state.totalHeight = totalRange * vpHeight.value state.totalHeight = totalRange * vpHeight.value
} }