如何防止在Vue.js的carousel上點擊a標簽時滾動

我做了一些旋轉卡片來模仿我們在網飛主頁上看到的那些。 它在單個組件上工作正常。但是當我向一個vue中添加多個carousel組件時，每當我單擊任何carousel上的一個箭頭時，頁面就會滾動，將carousel放在屏幕的頂部。此外，一旦滾動，箭頭就不起作用，除非我先手動滾動頁面。我已經嘗試了幾種我能在stackoverflow上找到的解決方案，但它們似乎都不起作用——大多導致傳送帶停止滾動。 這是傳送帶的一個部分。我認為是導致這個問題的原因。

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #000;
  font-family: Arial;
}

h1 {
  color: red;
  text-align: center;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100%);
  overflow: hidden;
  scroll-behavior: smooth;
}

.wrapper section {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, auto);
  margin: 20px 0;
}

.wrapper section .item3 {
  position: relative;
  padding: 0 2px;
  transition: 250ms all;
}

.wrapper section img {
  width: 100%;
}

.wrapper section .item3:hover {
  margin: 0 40px;
  transform: scale(1.2);
}

.wrapper section .item3 .heading {
  position: absolute;
  bottom: 20px;
  color: black;
  opacity: 0;
  width: 100%;
  font-size: var(--font-size-md)
}

.wrapper section .item3 .heading:hover {
  position: absolute;
  bottom: 20px;
  color: black;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.300);
  opacity: 1;
  width: 100%;
  font-size: var(--font-size-md)
}

.wrapper section img:hover~.heading {
  position: absolute;
  bottom: 20px;
  color: black;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.300);
  opacity: 1;
  width: 100%;
  font-size: var(--font-size-md)
}


/* .wrapper section .item3 .duration {
    position: absolute;
    bottom: 0;
    left: 20px;
    color: #fff;
  } */

.wrapper section .arrow__btn {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 6em;
  background: black;
  width: 80px;
  padding: 20px;
  text-align: center;
  z-index: 1;
  display: flex;
  align-items: center;
}

.wrapper section .left-arrow {
  top: 0;
  bottom: 0;
  left: 0;
  background: transparent;
}

.wrapper section .left-arrow:hover {
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}

.wrapper section .right-arrow {
  top: 0;
  bottom: 0;
  right: 0;
  background: transparent;
}

.wrapper section .right-arrow:hover {
  top: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}

<section id="section7" class="section7">
  <a href="#section9" class="arrow__btn left-arrow">?</a>
  <div class="" data-bs-toggle="modal" data-bs-target="#movieModal" @click="getMovie(movies[0].id)">
    <div class="item3">
      <img :src="`https://image.tmdb.org/t/p/w500/${movies[0]?.poster_path}`" alt="Describe Image">
      <h5 class="heading">{{ movies[0]?.title }}</h5>
    </div>
  </div>
  <div class="" data-bs-toggle="modal" data-bs-target="#movieModal" @click="getMovie(movies[1].id)">
    <div class="item3">
      <img :src="`https://image.tmdb.org/t/p/w500/${movies[1]?.poster_path}`" alt="Describe Image">
      <h5 class="heading">{{ movies[1]?.title }}</h5>
    </div>
  </div>
  <div class="" data-bs-toggle="modal" data-bs-target="#movieModal" @click="getMovie(movies[2].id)">
    <div class="item3">
      <img :src="`https://image.tmdb.org/t/p/w500/${movies[2]?.poster_path}`" alt="Describe Image">
      <h5 class="heading">{{ movies[2]?.title }}</h5>
    </div>
  </div>
  <div class="" data-bs-toggle="modal" data-bs-target="#movieModal" @click="getMovie(movies[3].id)">
    <div class="item3">
      <img :src="`https://image.tmdb.org/t/p/w500/${movies[3]?.poster_path}`" alt="Describe Image">
      <h5 class="heading">{{ movies[3]?.title }}</h5>
    </div>
  </div>
  <div class="" data-bs-toggle="modal" data-bs-target="#movieModal" @click="getMovie(movies[4].id)">
    <div class="item3">
      <img :src="`https://image.tmdb.org/t/p/w500/${movies[4]?.poster_path}`" alt="Describe Image">
      <h5 class="heading">{{ movies[4]?.title }}</h5>
    </div>
  </div>
  <a href="#section8" class="arrow__btn right-arrow">?</a>
</section>

我想知道你用什么樣的腳本來完成這項工作，我覺得你用的是bootstrap，如果這是正確的，我首先會建議你把它移到bootstrap vue，而不是這個。然而，我希望這有助于如果你不想切換。

您正在使用一個錨標記，并像這樣向它傳遞一個id

<a href="#my-div">content</a>

在瀏覽器中，這通常會將您滾動到具有ID的div。我建議將preventDefault()添加到這些錨標簽上的所有點擊事件中，您可以通過使用vue向所有錨標簽添加一個點擊函數來實現這一點，如下所示

<a href="#my-div" @click.prevent>content</a> // this automatically prevents click event
// or 
<a href="#my-div" @click="myFunction">content</a>
// or in case you want vue to automatically remove click events but add custom functions
<a href="#my-div" @click.prevent="otherFunction">content</a> // this automatically prevents click event



<script>
export default {
...other stuff
methods: {
myFunction(e) {
e.preventDefault();
}
}
}
</script>

雖然不是首選，但您可以嘗試不通過vue手動阻止此事件，這可以在安裝的掛鉤中完成 同樣，我不建議使用這種方法，堅持使用vue自己的@click事件處理程序

<script>
export default {
...,
mounted() {
const parent = document.getElementById("id-of-parent-div-that-has-all-anchor-tags") //this is done so you don't mess up anchor tags outside this div
parent.querySelectorAll("a").forEach((anchor) => {
anchor.onclick= (e) => e.preventDefault();
})

}

}

</script>