The vue-scroll-sync package that I installed does not work

Viewed 35

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

My code in codesandbox

vue-scroll-sync npm

GitHub

Component Example

<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)

0 Answers
Related