vue3项目 超出视口区域的部份支持滑动

在Vue3项目中，如果你想要一个元素超出当前视口范围仍然能支持滚动，你可以利用`overflow-y: scroll`样式结合`v-bind:class`动态控制来实现。下面是一个基本的例子：

在`.vue`文件的模板部分：

<div ref="container" class="scrollable-area" :class="{ scrollbarShowing: showScrollbar }">
  <!-- 这里的内容可能会超出视口 -->
  <p v-for="item in longContent" :key="item">{{ item }}</p>
</div>

在`data()`中声明一些状态变量：

export default {
  data() {
    return {
      longContent: Array.from({ length: 100 }, (_, i) => `内容${i + 1}`), // 模拟很长的内容列表
      showScrollbar: false,
    };
  },
  methods: {
    toggleScrollbar() {
      this.showScrollbar = !this.showScrollbar;
    },
  },
};

在`methods`中添加一个方法（比如当用户需要滚动时触发），并更新`showScrollbar`的状态：

// 假设有一个按钮或某个事件触发滚动显示
methods: {
  handleScrollShow() {
    this.toggleScrollbar();
  },
},

然后在CSS部分设置滚动条样式和滚动效果：

.scrollable-area {
  width: 100%;
  max-height: 200px; /* 预设视口大小，根据实际情况调整 */
  overflow-y: auto;
  transition: all 0.5s ease-in-out; /* 添加平滑过渡效果 */
}

.scrollbarShowing .scrollable-area {
  padding-bottom: 16px; /* 添加滚动条的高度，可以根据实际滚动条大小调整 */
}

当`showScrollbar`变为`true`时，就会显示滚动条，允许用户通过滚动条或手势上下移动内容。