interaction between texts and toc, alpha version, still buged

src/components/Layouts/MainContentLayout.vue

@@ -7,7 +7,7 @@
       <slot name="header" />
     </header>
 
-    <section class="col-6">
+    <section ref="scrollablecenter" class="col-6" @scroll.passive="onScrollCenter">
       <slot />
     </section>
 
@@ -25,6 +25,25 @@ export default {
     id: {
       type: String,
       required: true
+    },
+    reftoscrollto: { type: String }
+  },
+  watch: {
+    reftoscrollto: function (newref, oldref) {
+      console.log('reftoscrollto watcher', oldref, newref)
+      this.scrollToRef()
+    }
+  },
+  methods: {
+    onScrollCenter (e) {
+      // console.log('mainLayout onScrollCenter: e', e)
+      this.$emit('onCenterScrolled', e)
+    },
+    scrollToRef () {
+      console.log('scrollToRef', this.reftoscrollto, this.$refs)
+      this.$scrollTo(this.reftoscrollto, 500, {
+        container: this.$refs.scrollablecenter
+      })
     }
   }
 }