Запретить прокрутку браузера, когда карусель Bootstrap меняет слайд - PullRequest
Новая
       13

Запретить прокрутку браузера, когда карусель Bootstrap меняет слайд

0 голосов
/ 24 сентября 2018

У меня есть приложение VueJS со страницей, которая содержит семь маленьких каруселей (розовые коробки - с использованием BootstrapVue ).Каждая карусель содержит несколько слайдов (один продукт на слайд).

Ниже (Зеленые прямоугольники) приведен список различных комбинаций, которые можно создать (Каждое зеленое поле представляет собой уникальную комбинацию).

Когда я нажимаю комбинацию, она устанавливает для каждой карусели правильный продукт / слайд.Проблема в том, что если вы щелкнете по одному из зеленых полей, чтобы установить комбинацию (это работает нормально), и страница будет прокручена вниз, страница автоматически прокрутится до изменяющейся карусели.Я подозреваю, что способ установки слайда в карусели приводит его к фокусировке и заставляет браузер прокручиваться вверх (Firefox).

Вопрос: Как запретить прокрутку браузеракогда я нажимаю на одну из комбинаций?(Я хотел бы, чтобы браузер оставался в том же положении)

enter image description here

Шаблон для моей карусели выглядит следующим образом: 

<template>
  <div class="b-capsule-layer">

    <b-carousel id="carousel1"
      ref="layerCarousel"
      :controls="showControls"
      :interval="0"
      v-model="slide"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
      @mouseenter.native="toggleHover"
      @mouseleave.native="toggleHover"
    >

      <b-carousel-slide
        v-for="(product, index) in sortedBySequence(layer)"
        class="p-3"
        :key="product.id"
        :img-src="product.image_urls[0]"
        :data-product-id="product.id"
        :data-product-index="index"
        v-on:click.native="clickProductSlide($event, product)"
      >
        <div class="brand">{{product.brand_name}}</div>
        <div class="price">{{ formattedPrice(product) }}</div>
      </b-carousel-slide>

    </b-carousel>
  </div>
</template>

В компоненте карусели у меня есть значение данных, которое называется selectedProductId (каждый слайд - это отдельный продукт).У меня есть наблюдатель, настроенный на прослушивание изменений selectedProductId, и, если изменение сделано, карусель меняется на правильный слайд.

Мой наблюдатель выглядит следующим образом: 

watch: {
  layerProducts: function(newVal, oldVal) {
    this.setSelectedProduct();
  },

  selectedProductId: function(newVal, oldVal) {
    if ( newVal !== null || newVal == oldVal) {
      const el = document.querySelector(`[data-product-id='${newVal}']`);

      if (el && !el.classList.contains('active')) {
        this.slide = parseInt(el.dataset['productIndex']);
      }
    }
  }
}

Значение selectedProductId устанавливается, когда родительский компонент карусели вносит изменения в layerProducts (это изменение срабатывает в первом наблюдателе выше).

1 Ответ

0 голосов
/ 09 июля 2019

Убедитесь, что вы используете последние версии Vue и BootstrapVue.

...