VUE3屏幕滚动效果

#模板

<template>

        <button id="counter" ref='contRef' @click="increment">{{ count }}</button>

</template>

#JS代码

<script setup>

import { ref, nextTick } from 'vue'

const count = ref(0)

const contRef= ref()

async function increment() {

        count.value++

        // DOM 还未更新         

        console.log(document.getElementById('counter').textContent) // 0

        await nextTick() //

         DOM 此时已经更新         

        console.log(document.getElementById('counter').textContent) // 1

        let scrollElem =  contRef.value 

        scrollElem.scrollTo({

                top: scrollElem.scrollHeight,

                behavior: 'smooth'

        })

}

</script>

#问题

scrollTo和scrollTop 使用可能无效 

#解决方案

scrollIntoView 该API完美替换 

        let scrollElem =  contRef.value 

        scrollElem.scrollIntoView ({

                block: 'start'  //start 视口的顶部 center 视口的中间 end 视口的底部

                behavior: 'smooth'

        })