Fix stuttering list view
This commit is contained in:
@@ -102,7 +102,7 @@ onMounted(async () => {
|
|||||||
</svg>
|
</svg>
|
||||||
<p class="empty-state__label">All caught up</p>
|
<p class="empty-state__label">All caught up</p>
|
||||||
</div>
|
</div>
|
||||||
<template v-for="( feed, index ) in feeds ">
|
<template v-for="( feed, index ) in feeds " :key="feed.id">
|
||||||
<div v-bind:id="index" class="observe">
|
<div v-bind:id="index" class="observe">
|
||||||
<p class="feed-source">{{ feed.feedTitle }}</p>
|
<p class="feed-source">{{ feed.feedTitle }}</p>
|
||||||
<h2 @click="loadReadable(feed, index)" class="feed-title">{{ feed.title }}</h2>
|
<h2 @click="loadReadable(feed, index)" class="feed-title">{{ feed.title }}</h2>
|
||||||
|
|||||||
@@ -221,7 +221,16 @@ async function handleIntersection(entries, topbarHeight = 0) {
|
|||||||
|
|
||||||
const readIds = new Set(readFeeds.map(feed => feed.id))
|
const readIds = new Set(readFeeds.map(feed => feed.id))
|
||||||
feeds.value = feeds.value.filter(feed => !readIds.has(feed.id))
|
feeds.value = feeds.value.filter(feed => !readIds.has(feed.id))
|
||||||
document.getElementById(0)?.scrollIntoView()
|
// Removing .observe nodes that have already scrolled above the viewport
|
||||||
|
// shrinks the document above the current scroll position — native CSS
|
||||||
|
// scroll anchoring (on by default, no overflow-anchor override here)
|
||||||
|
// compensates for that automatically by keeping the visually-anchored
|
||||||
|
// node in place. Do NOT add a scrollIntoView()/scrollTo() here: an
|
||||||
|
// earlier version called `document.getElementById(0)?.scrollIntoView()`
|
||||||
|
// to fix a past scroll-jump complaint, but by the time several articles
|
||||||
|
// have been read, id "0" is an already-read element far above the
|
||||||
|
// viewport — forcing a jump to it fights scroll anchoring and is exactly
|
||||||
|
// the stutter being fixed now.
|
||||||
}
|
}
|
||||||
|
|
||||||
function setInitialLoad(value) {
|
function setInitialLoad(value) {
|
||||||
|
|||||||
Reference in New Issue
Block a user