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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 09.01.2023

есть два блока со скролами, надо что бы при скроле одного, скролился и др блок, ширины одинаковые. в один контейнер поместить нельзя.
Использую библиотеку 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/vue@2.7.0/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuescroll@4.17.5/dist/vuescroll.min.js"></script>

vue.js

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

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

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/vue@2.7.0/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuescroll@4.17.5/dist/vuescroll.min.js"></script>

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

Ответы