scrollIntoView滚动不生效

<script setup>
import { ref, onMounted} from 'vue'
import ImgWall from './ImgWall.vue';

const slideShow = ref(null)

defineProps({
  msg: String,
})

const lock = ref(false) // 锁
const ImgWallRef = ref(null)

onMounted(() => {
  console.log("渲染完成")
  slideShow.value.addEventListener('mousewheel',mousewheelHandler)
})

function mousewheelHandler(event) {
  if (lock.value) {
    return
  }
  if (event.wheelDelta < 0){
    lock.value = true
    scrollHandler()
  }
}

function scrollHandler() {
  console.log("滚动")
  console.log(document.querySelector('.img-wall'))
  document.querySelector('.img-wall').scrollIntoView({ behavior: 'smooth'})
}

</script>

<template>
  <div class="container" ref="slideShow">
	代码省略CSDN：https://blog.csdn.net/weixin_45721179
  </div>
  <div class=".img-wall"></div>
  <ImgWall ref="ImgWallRef"/>
</template>
css省略

在滚动后无法移动到元素位置，并且不报错，但是在控制台输入

document.querySelector('.img-wall').scrollIntoView({ behavior: 'smooth'})

可正确滚动，并且将这句放入onMounted也可正确实现移动效果，通过点击事件去执行也可正常触发效果，但有概率中途卡停
起初意外是dom元素获取出现了问题，后多次测试发现是smooth的问题，改成auto即可实现滚动，但无过渡效果
综合考虑还是使用类似轮播图切换的方式来切换下一页比较稳妥