refs #1804 Add buffer for virtual scroll in sidebar

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="tabs">
+  <div class="tabs" id="sidebar_tabs">
     <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
-      <el-tab-pane label="Posts" name="posts"><Posts :account="account" /></el-tab-pane>
+      <el-tab-pane label="Posts" name="posts"><Posts :account="account" :buffer="buffer" /></el-tab-pane>
-      <el-tab-pane label="Posts and replies" name="posts_and_replies"><PostsAndReplies :account="account" /></el-tab-pane>
+      <el-tab-pane label="Posts and replies" name="posts_and_replies"><PostsAndReplies :account="account" :buffer="buffer" /></el-tab-pane>
-      <el-tab-pane label="Media" name="media"><Media :account="account" /></el-tab-pane>
+      <el-tab-pane label="Media" name="media"><Media :account="account" :buffer="buffer" /></el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -23,7 +23,15 @@ export default {
   },
   data() {
     return {
-      activeName: 'posts'
+      activeName: 'posts',
+      defaultBuffer: 200,
+      buffer: 200
+    }
+  },
+  mounted() {
+    const timeline = document.getElementById('sidebar_tabs')
+    if (timeline !== undefined && timeline !== null) {
+      this.buffer = this.defaultBuffer + timeline.getBoundingClientRect().top
     }
   },
   methods: {

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="timeline">
-    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
+    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
           <toot
@@ -30,7 +30,7 @@ import { Event } from '~/src/renderer/components/event'
 
 export default {
   name: 'media',
-  props: ['account'],
+  props: ['account', 'buffer'],
   components: { Toot },
   data() {
     return {

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue

@@ -16,7 +16,7 @@
       >
       </toot>
     </template>
-    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
+    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
           <toot
@@ -46,7 +46,7 @@ import { Event } from '~/src/renderer/components/event'
 
 export default {
   name: 'posts',
-  props: ['account'],
+  props: ['account', 'buffer'],
   components: { Toot },
   data() {
     return {

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="timeline">
-    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
+    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
           <toot
@@ -30,7 +30,7 @@ import { Event } from '~/src/renderer/components/event'
 
 export default {
   name: 'posts-and-replies',
-  props: ['account'],
+  props: ['account', 'buffer'],
   components: { Toot },
   data() {
     return {