让div内容超过50vh的时候 滚动条位置在最下面

让div内容超过50vh的时候 滚动条位置在最下面

<template>
  <div ref="scrollContainer" class="scroll-container">
    <!-- 动态内容 -->
    <div v-for="item in items" :key="item.id">{{ item.text }}</div>
  </div>
</template>

<script setup lang="ts">
//获取动态内容数据
const getMssageListMethod = async (id: number) => {
  mssageListData.value = await MultilateralTalksApi.getMessagePage({ conferenceId: id })
  scrollToBottom() // 数据加载后立即滚动，在需要的地方调用即可
}
const scrollContainer = ref<HTMLElement | null>(null)
const scrollToBottom = () => {
  // 使用 nextTick 确保 DOM 更新完成
  nextTick(() => {
    if (!scrollContainer.value) return
    // 平滑滚动
    scrollContainer.value.scrollTo({
      top: scrollContainer.value.scrollHeight,
      behavior: 'smooth'
    })
  })
}
</script>

<style>
.scroll-container {
  max-height: 50vh;
  overflow-y: scroll;
}
/* 隐藏滚动条 - WebKit 浏览器 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 0; /* 垂直滚动条宽度 */
  height: 0; /* 水平滚动条高度 */
  background: transparent; /* 可选：使滚动条轨道透明 */
  /* 可选：为 Firefox 隐藏滚动条 */
  scrollbar-width: none; /* Firefox 64+ */
  -ms-overflow-style: none; /* IE 和 Edge */
}
</style>