Vue

by khamer

HTML

<script src="https://raw.githubusercontent.com/imarc/v-scroll-sync/master/v-scroll-sync.js"></script>
<div id="app">
  <div class="columns">
    <div class="column" v-scroll-sync>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eveniet perspiciatis sint obcaecati! Quam magnam ad alias beatae harum? Eius reprehenderit sunt assumenda delectus! Corrupti laudantium placeat sint libero expedita porro, odit quas cupiditate praesentium totam tempore ad distinctio animi voluptatem vel ipsa vero nostrum? Distinctio natus debitis ab blanditiis consequuntur molestiae, quasi dolorem rem corrupti officia atque, sequi ex quidem totam quas repudiandae laudantium facilis? Suscipit amet tenetur voluptate unde temporibus repellat, eaque reprehenderit maiores, explicabo modi corrupti error eveniet ut, sapiente voluptas. Porro libero quia laudantium commodi nemo odit dolore, animi vitae hic itaque earum ex sunt, harum facere sequi suscipit facilis corrupti ratione dolorum adipisci nostrum dolor ullam? Officia, blanditiis modi soluta vitae voluptatem accusamus earum veritatis repellat error expedita quisquam laboriosam neque, sit corporis nisi at quod! Provident dolore eum officiis? Itaque maxime optio fugit deserunt fugiat aliquid, perferendis recusandae natus at, omnis laudantium minima. Ut dolore laborum architecto similique corporis nesciunt consequatur blanditiis animi voluptas dignissimos sint error sequi necessitatibus labore vel a distinctio, cum possimus magni explicabo. Ratione quisquam quasi pariatur amet blanditiis, distinctio eum, repudiandae, suscipit velit officia veniam totam corporis impedit? Eveniet velit distinctio ab illo, corrupti incidunt dignissimos necessitatibus culpa nam optio expedita voluptatum accusantium. Assumenda iste cum nostrum eligendi, minus in eius distinctio illo expedita eos nemo ipsam, necessitatibus sit. Ratione, nemo? Eaque ducimus repudiandae blanditiis qui id quis maxime cumque sint inventore quidem iusto,...

CSS

.columns {
  display: flex;
}

.column {
  height: 300px;
  padding: 2em;
  overflow: scroll;
}

Vue

import { VScrollSync } from 'https://unpkg.com/[email protected]/dist/v-scroll-sync.js';