当Bootstrap轮播更改幻灯片时，阻止浏览器向上滚动

Question

我有一个VueJS应用，该应用的页面包含七个小轮播（粉盒-使用BootstrapVue）。每个转盘都包含许多幻灯片（每张幻灯片一个产品）。

下面的（绿色框）是可以进行的不同组合的列表（每个绿色框是唯一的组合）。

当我单击组合时，会将每个轮播设置为正确的产品/幻灯片。 问题是，如果单击绿色框之一来设置组合（此方法工作正常），并且页面向下滚动，则页面会自动向上滚动到要更改的轮播。 我怀疑我在轮播中设置幻灯片的方式会使其聚焦，并导致浏览器向上滚动（Firefox）。

问题：当我单击其中一种组合时，如何防止浏览器向上滚动？ （我想将浏览器保持在同一位置）

我的轮播模板如下：

<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的值（此更改在上面的第一个观察者中触发）。

Answer 1

确保您使用的是最新版本的Vue和BootstrapVue。