How can i sync scroll event of two vue component i a non-parent-child relation
Scrolling here ...
BaseLayout.vue
<script setup>
...
function logScrolling(event) {
console.log("Scrolling to " + event.detail.currentY);
// rightIonContent.value.$el.scrollToPoint(X, Y, 500); // this is not working
}
...
</script>
<template>
...
<ion-content :scroll-events="true" @ionScroll="logScrolling($event)" >
<slot />
</ion-content>
...
</template>
should be synced with:
AppMenuRight.vue
<script setup>
function ScrollingToPoint(X, Y) {
rightIonContent.value.$el.scrollToPoint(X, Y, 500);
}
</script>
<template>
...
<ion-content :scroll-events="true" ref="rightIonContent">
...
</ion-content>
...
</template>
BaseLayout should set scroll value in vuex store. Than Other component can watch that property and set element scroll value accordingly in the watcher
I have used the option with useEmitter.js described here: Vue.js 3 Event Bus
import { getCurrentInstance } from 'vue'
export default function useEmitter() {
const internalInstance = getCurrentInstance();
const emitter = internalInstance.appContext.config.globalProperties.emitter;
return emitter;
}