I decided to use vue-scroll-sync in my project, but before using I decided to test it in codesandbox but it does not work although I repeated step by step as in the documentation
I will leave links to useful resources
<template>
<div class="examples">
<v-scroll-sync>
<div class="one" v-scroll-sync>
In eu tristique dolor, ac fermentum massa. Praesent nec ipsum
sollicitudin, accumsan dolor eget, commodo diam. Quisque a risus at orci
bibendum vestibulum. Donec lacinia, neque vel luctus ultrices, tortor
dolor imperdiet magna, eu porta tellus purus sed lorem. Vestibulum
imperdiet, erat quis viverra congue, elit enim tincidunt erat, et
venenatis sem nisl at turpis. Sed lacinia sem at rhoncus efficitur. Nunc
id sodales nunc. Morbi eu ex eleifend, tristique leo imperdiet, placerat
tellus. Etiam ultricies sem sed felis convallis sodales. Aenean
sollicitudin ligula pharetra nisl dignissim ornare. Curabitur placerat
leo ac nulla auctor, eget vulputate mi consectetur. Suspendisse a
iaculis orci, eget congue odio. Nulla tincidunt, arcu id imperdiet
tempor, eros augue maximus mi, a aliquam tellus nulla non lorem. Mauris
tristique leo quis tortor fringilla, id mattis dolor dignissim. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Ut eget magna ultricies, aliquet leo at, posuere lacus.
</div>
</v-scroll-sync>
<v-scroll-sync>
<div class="two" v-scroll-sync>
In eu tristique dolor, ac fermentum massa. Praesent nec ipsum
sollicitudin, accumsan dolor eget, commodo diam. Quisque a risus at orci
bibendum vestibulum. Donec lacinia, neque vel luctus ultrices, tortor
dolor imperdiet magna, eu porta tellus purus sed lorem. Vestibulum
imperdiet, erat quis viverra congue, elit enim tincidunt erat, et
venenatis sem nisl at turpis. Sed lacinia sem at rhoncus efficitur. Nunc
id sodales nunc. Morbi eu ex eleifend, tristique leo imperdiet, placerat
tellus. Etiam ultricies sem sed felis convallis sodales. Aenean
sollicitudin ligula pharetra nisl dignissim ornare. Curabitur placerat
leo ac nulla auctor, eget vulputate mi consectetur. Suspendisse a
iaculis orci, eget congue odio. Nulla tincidunt, arcu id imperdiet
tempor, eros augue maximus mi, a aliquam tellus nulla non lorem. Mauris
tristique leo quis tortor fringilla, id mattis dolor dignissim. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Ut eget magna ultricies, aliquet leo at, posuere lacus.
</div>
</v-scroll-sync>
</div>
</template>
<script>
import Vue from "vue";
import ScrollSync from "vue-scroll-sync";
export default {
components: {
ScrollSync,
},
};
</script>
<style scoped>
.examples {
display: flex;
}
.one,
.two {
overflow-x: scroll;
height: 100vh;
}
</style>
Here is my actual code, in my opinion, I do not see the errors that I made in order for it not to work (but maybe I'm wrong)