当前位置：首页 > VUE

vue实现横向滚动

2026-02-19 10:23:45VUE

实现横向滚动的基本方法

在Vue中实现横向滚动可以通过CSS和HTML结构结合完成。确保容器宽度固定或超出父元素宽度，并设置overflow-x: auto。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <!-- 横向滚动的内容项 -->
      <div v-for="item in items" :key="item.id" class="scroll-item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.scroll-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
}
.scroll-item {
  display: inline-block;
  width: 200px;
  margin-right: 10px;
}
</style>

使用第三方库（如vue-horizontal）

如果需要更复杂的横向滚动效果（如分页、响应式布局），可以使用专用库如vue-horizontal。

安装依赖：

vue实现横向滚动

npm install vue-horizontal

示例代码：

<template>
  <vue-horizontal>
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </vue-horizontal>
</template>

<script>
import VueHorizontal from "vue-horizontal";

export default {
  components: { VueHorizontal },
  data() {
    return {
      items: [...], // 你的数据
    };
  },
};
</script>

添加滚动按钮控制

通过ref获取DOM元素，用JavaScript控制滚动行为。

vue实现横向滚动

<template>
  <div>
    <button @click="scrollLeft">向左滚动</button>
    <div ref="scrollContainer" class="scroll-container">
      <div class="scroll-content">
        <div v-for="item in items" :key="item.id" class="scroll-item">
          {{ item.text }}
        </div>
      </div>
    </div>
    <button @click="scrollRight">向右滚动</button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollLeft() {
      this.$refs.scrollContainer.scrollBy({ left: -200, behavior: 'smooth' });
    },
    scrollRight() {
      this.$refs.scrollContainer.scrollBy({ left: 200, behavior: 'smooth' });
    },
  },
};
</script>

响应式设计适配

通过CSS媒体查询或JavaScript动态计算宽度，确保在不同屏幕尺寸下表现一致。

.scroll-item {
  display: inline-block;
  width: calc(33.33% - 10px);
  margin-right: 10px;
}

@media (max-width: 768px) {
  .scroll-item {
    width: calc(50% - 10px);
  }
}

隐藏滚动条（可选）

如果希望视觉上更简洁，可以隐藏原生滚动条。

.scroll-container {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}
.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}