I'm currently working on a VueJS app that has a page consisting of seven small carousels (Pink boxes - utilizing BootstrapVue). Each carousel showcases different products with one product displayed per slide.
Beneath the carousels are green boxes representing various unique combinations that can be created. When a user clicks on a combination, it updates each carousel to display the correct product/slide. However, there's an issue where if the page is scrolled down and a green box is clicked, the browser automatically scrolls back up to focus on the carousel that changed, especially noticeable in Firefox.
Question: How can I prevent this automatic scrolling behavior when clicking on one of the combinations? (I want the browser to stay in its current position)
https://i.sstatic.net/QWM15.png
This is how the template for my carousel is structured:
<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>
Within the carousel component, there is a data value called selectedProductId, which corresponds to the selected slide/product. A watcher is in place to detect changes in selectedProductId and update the carousel accordingly.
The watcher function is as follows:
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']);
}
}
}
}
The value of selectedProductId changes whenever the parent component of the carousel makes modifications to layerProducts, triggering the first watcher above.