Vue3中滚动条在容器中始终滚动到底部

<template>
  <section class="list-remark-box" v-if="props.feedbackData.length > 0" ref="listRef">
      // .......
  </section>
</template>
 
<script setup>
const listRef = ref(null)
const onScrollChange = () => {
	setTimeout(() => {
		listRef.value.scrollTop = listRef.value.scrollHeight
	})
}
watch(() => props.feedbackData, () => {
	if (props.feedbackData.length > 0) {
		onScrollChange()
	}
}, { deep: true })
</script>
 

verion 1.0.1

<script setup>
import { ref, reactive, onMounted, defineProps, nextTick } from 'vue'
 
const scrollDiv = ref(null)
 
onMounted(() => {
    //划动回到顶部
    nextTick(() => {
        let scrollElem = scrollDiv.value;
        scrollElem.scrollTo({ top: 0, behavior: 'smooth' });
    });
    // 滚动到底部
    nextTick(() => {
        let scrollElem = scrollDiv.value;
        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' });
    });
 
})
</script>