Vue.js轮播组件中点击a标签时如何阻止页面滚动

我做了个仿Netflix主页的轮播卡片组件，单个组件运行正常，但在Vue项目里添加多个后，点击任意轮播的箭头按钮时，页面会滚动至该轮播组件顶部；而且滚动后箭头按钮直接失效，得手动滚动页面才能恢复功能。试过StackOverflow上各种解决方案都没用，大多直接让轮播停摆。我怀疑是a标签引发的问题，下面是组件的代码片段：

CSS代码 #

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 .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%);
}

HTML代码（Vue模板） #

<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>

你猜的没错，问题根源就是a标签的href="#xxx"属性。这个属性会触发浏览器的锚点跳转行为，加上你设置了scroll-behavior: smooth，就会导致页面滚动到对应组件顶部；同时锚点跳转可能干扰Vue的事件绑定逻辑，造成箭头按钮失效。

直接按以下步骤修改即可解决：

1. 替换a标签为按钮元素
   把箭头的<a>换成<button>，因为这里不需要跳转，只是触发轮播滚动逻辑，按钮更符合语义。

2. 绑定点击事件实现手动滚动
   在Vue里给按钮添加@click事件，用原生JS控制轮播容器的滚动行为，替代锚点跳转。

3. 调整样式兼容按钮元素
   给按钮添加样式，去掉浏览器默认的按钮样式，保持原有箭头的视觉效果。

修改后的代码示例 #

Vue模板部分

<section ref="carousel" class="section7">
  <button class="arrow__btn left-arrow" @click="scrollCarousel('left')">‹</button>
  <!-- 卡片内容保持不变 -->
  <button class="arrow__btn right-arrow" @click="scrollCarousel('right')">›</button>
</section>

Vue脚本部分

methods: {
  scrollCarousel(direction) {
    const carousel = this.$refs.carousel;
    // 自定义滚动距离，可根据卡片宽度调整数值
    const scrollDistance = direction === 'left' ? -300 : 300;
    carousel.scrollBy({ left: scrollDistance, behavior: 'smooth' });
  },
  // 原有getMovie方法保持不变
  getMovie(movieId) {
    // ...你的逻辑
  }
}

CSS补充

.arrow__btn {
  /* 保留原有样式 */
  border: none;
  cursor: pointer;
  background: transparent;
}

如果是循环渲染多个轮播组件，用ref比id更可靠，避免元素id重复的问题。这样修改后，既能保留平滑滚动的效果，又能彻底解决锚点跳转带来的页面滚动和按钮失效问题。

内容的提问来源于stack exchange，提问作者An Daehyun