Add resetting of posts list scroll position

savageserif · Dec 7, 2024 · 86ae560 · 86ae560 · github-actions · Dec 7, 2024
1 parent 1ff6027
commit 86ae560
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/components/column-posts-list/ThePostsListColumnBody.vue b/src/components/column-posts-list/ThePostsListColumnBody.vue
@@ -23,11 +23,11 @@ const content = useContentStore();
 const router = useRouter();
 const route = useRoute();
 
-const containerElement = ref<HTMLElement | null>(null);
+const containerElement = ref<ComponentPublicInstance | null>(null);
 
 onMounted(() => {
   useInfiniteScroll(
-    containerElement,
+    containerElement.value?.$el,
     () => {
       if (content.currentCategoryHasSomePostItems && !content.currentCategoryHasAllPostItems) {
         content.fetchPostItems();
@@ -37,6 +37,15 @@ onMounted(() => {
   );
 });
 
+// reset container's scroll position when category is switched
+watch(
+  () => content.currentCategory,
+  () => {
+    if (!containerElement.value) return;
+    containerElement.value.$el.scrollTop = 0;
+  }
+);
+
 const statusMessage = computed(() => {
   if (content.currentCategoryHasAllPostItems)
     return `You have browsed all “${content.currentCategoryName.replace(' ', '&nbsp;')}” entries. Refresh the list to view newer posts.`;