vue overflow-y 滑动到边界，会使弹窗底部滑动

如果您在 Vue 中使用 `overflow-y` 属性来实现滚动，并且滚动到边界时出现了弹窗底部滑动的问题，可能的原因是滑动时触发了浏览器的默认行为，导致整个页面的滚动。为了避免这种情况，您可以尝试在滑动事件中调用 `event.preventDefault()` 方法来阻止默认行为的发生。

以下是一个使用 Vue 实现的示例代码，您可以参考一下：

<template>
  <div class="container" ref="container" @scroll="handleScroll">
    <div class="content">
      <!-- 此处为滚动内容 -->
    </div>
    <div class="popup" ref="popup">
      <!-- 此处为弹窗内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      const container = this.$refs.container;
      const popup = this.$refs.popup;
      const scrollTop = container.scrollTop;
      const containerHeight = container.offsetHeight;
      const popupHeight = popup.offsetHeight;
      const popupTop = popup.offsetTop;
      const popupBottom = popupTop + popupHeight;

      // 判断弹窗是否在可视区域内
      if (popupBottom > scrollTop && popupTop < scrollTop + containerHeight) {
        // 如果弹窗底部超出可视区域，则将容器滚动到弹窗底部
        if (popupBottom > scrollTop + containerHeight) {
          container.scrollTop = popupBottom - containerHeight;
        }
        // 如果弹窗顶部超出可视区域，则将容器滚动到弹窗顶部
        if (popupTop < scrollTop) {
          container.scrollTop = popupTop;
        }
        // 阻止默认行为
        event.preventDefault();
      }
    }
  }
};
</script>

<style>
.container {
  height: 200px;
  overflow-y: scroll;
}

.popup {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
}
</style>

在上述代码中，我们在 `handleScroll` 方法中判断弹窗是否在可视区域内，并根据其位置调整容器的滚动位置。同时，如果弹窗在可视区域内，我们还会调用 `event.preventDefault()` 方法来阻止默认行为的发生，以避免整个页面的滚动。