当Bootstrap轮播更改幻灯片时，防止浏览器向上滚动-Java 学习之路

我有一个VueJS应用程序，页面包含七个小转盘（粉红色框 - 使用BootstrapVue） . 每个转盘都包含许多幻灯片（每张幻灯片一个产品） .

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

当我单击一个组合时，它会将每个轮播设置为正确的产品/幻灯片 . 问题是，如果您单击其中一个绿色框来设置组合（这可以正常工作），并且页面向下滚动，页面会自动向上滚动到更改的轮播 . 我怀疑我在旋转木马中设置幻灯片的方式使其聚焦并使浏览器向上滚动（Firefox） .

Question: 如何在单击其中一个组合时阻止浏览器向上滚动？（我想让浏览器保持相同的位置）

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>

在carousel组件中，我有一个名为 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']);
      }
    }
  }
}

当轮播的父组件对 layerProducts 进行更改时，将设置 selectedProductId 的值（此更改在上面的第一个观察者中触发） .

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

相关问题