vue项目中 div内容超出固定高度 点击按钮 向上或向下 移动相应距离 当距离为0时 按钮禁止点击

你可以在 Vue 项目中使用 CSS 属性 overflow 和 position 来实现这个功能。首先，让 div 具有固定高度和可滚动属性：

<div class="wrapper" style="height: 200px; overflow: auto;">
  <!-- div 内容 -->
</div>

接下来，在 div 中添加一个按钮用于向上或向下滚动：

<div class="wrapper" style="height: 200px; overflow: auto;">
  <!-- div 内容 -->
  <button @click="scroll(-50)" :disabled="scrollPosition === 0">Up</button>
  <button @click="scroll(50)" :disabled="scrollPosition === maxScroll">Down</button>
</div>

然后在 Vue 组件中定义 scrollPosition 和 maxScroll 变量，并添加一个 scroll 方法来处理按钮的点击事件：

export default {
  data() {
    return {
      scrollPosition: 0,
      maxScroll: 0
    }
  },
  mounted() {
    this.maxScroll = this.$refs.wrapper.scrollHeight - this.$refs.wrapper.clientHeight
  },
  methods: {
    scroll(deltaY) {
      this.scrollPosition = Math.max(0, Math.min(this.maxScroll, this.scrollPosition + deltaY))
      this.$refs.wrapper.scrollTop = this.scrollPosition
    }
  }
}

在这个例子中，我们使用 ref 属性来获取 wrapper 元素，并在 mounted 钩子中计算 maxScroll 变量。scroll 方法根据传入的 deltaY 变量来更新 scrollPosition，并将 scrollTop 属性设置为新的 scrollPosition。最后，在按钮上使用 :disabled 绑定来禁用按钮，如果 scrollPosition 为 0，则禁用 Up 按钮；如果 scrollPosition 等于 maxScroll，则禁用 Down 按钮。