fix(timeline): auto scroll to bottom sometimes turning off

vuejs · Mar 9, 2022 · 89870ea · 89870ea
1 parent a066ce3
commit 89870ea
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/packages/app-frontend/src/features/timeline/TimelineEventList.vue b/packages/app-frontend/src/features/timeline/TimelineEventList.vue
@@ -100,7 +100,7 @@ export default defineComponent({
 
  function onScroll () {
  const scrollerEl = scroller.value.$el
- isAtScrollBottom.value = scrollerEl.scrollTop + scrollerEl.clientHeight >= scrollerEl.scrollHeight - 100
+ isAtScrollBottom.value = scrollerEl.scrollTop + scrollerEl.clientHeight >= scrollerEl.scrollHeight - 400
  }
 
  watch(scroller, value => {
@@ -151,8 +151,10 @@ export default defineComponent({
  function scrollToBottom () {
  if (!scroller.value) return
 
- const scrollerEl = scroller.value.$el
- scrollerEl.scrollTop = scrollerEl.scrollHeight
+ requestAnimationFrame(() => {
+ const scrollerEl = scroller.value.$el
+ scrollerEl.scrollTop = scrollerEl.scrollHeight
+ })
  }
 
  // Important: Watch this after the scroll to inspect event watchers
@@ -241,7 +243,7 @@ export default defineComponent({
  :items="filteredEvents"
  :item-size="itemHeight"
  class="flex-1"
- @scroll.native="onScroll()"
+ @scroll.native.passive="onScroll()"
  >
  <template #default="{ item: event }">
  <TimelineEventListItem