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

您好！感谢您的提问。针对您的问题，可以使用CSS3的属性-webkit-overflow-scrolling: touch;，让内容超出部分可以滚动。然后再通过JavaScript来控制点击按钮时滚动的距离，具体代码如下：

HTML部分：

<div class="scroll-container">
  <div class="scroll-content">
    这里是内容区域，高度固定，内容超出会出现滚动条。
  </div>
  <div class="scroll-btn-up"></div>
  <div class="scroll-btn-down"></div>
</div>

CSS部分：

.scroll-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.scroll-content {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-btn-up {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
}

.scroll-btn-down {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
}

JavaScript部分：

var content = document.querySelector('.scroll-content');
var btnUp = document.querySelector('.scroll-btn-up');
var btnDown = document.querySelector('.scroll-btn-down');

var scrollDistance = 50; // 每次滚动的距离

btnUp.addEventListener('click', function() {
  content.scrollTop -= scrollDistance;
});

btnDown.addEventListener('click', function() {
  content.scrollTop += scrollDistance;
});

上面的代码实现了在一个固定高度的div中，内容超出可以滚动，同时添加了向上和向下的按钮，点击按钮时内容区域就会滚动相应的距离。希望这个回答能够解决您的问题！