Vuescroll. Связать два скролла между собой

Question

есть два блока со скролами, надо что бы при скроле одного, скролился и др блок, ширины одинаковые. в один контейнер поместить нельзя.
Использую библиотеку https://vuescrolljs.yvescoding.me/. Сижу и ищу в доке как можно указывать положение скролла, но не нашла, либо не вижу. Нашла только такой параметр, но он только при загрузке стр initialScrollX. Есть событие handleScrollBody, там могу получить на сколько был сдвинут скролл. Подскажите пожалуйста, каким образом можно связать эти скролы, скролю один, на такое же расстояние скролится другой. Скролл по горизонтали

const BaseTable = new Vue({
    el:"#app",
    data: {
        updateMe: '',
        range: '1',
        ops: {
          scrollPanel: {
            initialScrollX: 0,
            initialScrollY: 1,
            locking: true
          },
        },
    },
    watch: {
    },
    mounted() {
    },
    methods: {
      handleScrollBody(vertical, horizontal, nativeEvent) {
        console.log('horizontal2', horizontal)
      }
    }
});

.block1,
.block2 {
  max-width: 100%;
}

.content {
  width: 2500px;
  height: 100px;
  background: red;
}

<body>
  <div id="app">
    <div class="block1">
      <vue-scroll class="scroll-table" :ops="ops">
        <div class="content">{{ range }}</div>
      </vue-scroll>
    </div>
    <div class="block2">
      <vue-scroll @handle-scroll="handleScrollBody" class="scroll-table" :ops="ops">
        <div class="content">{{ range }}</div>
      </vue-scroll>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuescroll.min.js"></script>

Answer 1

В общем, как у плагина выставлять положение скролла я так и не нашла. пошла другим путем

const BaseTable = new Vue({
    el:"#app",
    data: {
        updateMe: '',
        range: '1',
        ops: {
          scrollPanel: {
            initialScrollX: 0,
            initialScrollY: 1,
            locking: true
          },
        },
    },
    watch: {
    },
    mounted() {
    },
    methods: {
      handleScrollHeader(vertical, horizontal, nativeEvent) {
        const scrollProgres = horizontal.scrollLeft
        const headerBlock = document.querySelector('.block2 .__panel')
        headerBlock.scrollLeft = scrollProgres
      },
      handleScrollBody(vertical, horizontal, nativeEvent) {
        const scrollProgres = horizontal.scrollLeft
        const headerBlock = document.querySelector('.block1 .__panel')
        headerBlock.scrollLeft = scrollProgres
      }
    }
});

.block1,
.block2 {
  max-width: 100%;
}

.content {
  width: 2500px;
  height: 100px;
  background: red;
}

<body>
  <div id="app">
    <div class="block1">
      <vue-scroll class="scroll-table" :ops="ops" @handle-scroll="handleScrollHeader">
        <div class="content">{{ range }}</div>
      </vue-scroll>
    </div>
    <div class="block2">
      <vue-scroll @handle-scroll="handleScrollBody" class="scroll-table" :ops="ops">
        <div class="content">{{ range }}</div>
      </vue-scroll>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuescroll.min.js"></script>

БЛОГ НА HUSL

Vuescroll. Связать два скролла между собой

Ответы (1 шт):