vue3 $refs修改scrollLeft或scrollTop不成功值为0

今天范了了一个很低级的错误，本身想用element ui来做横向滚动条，结果改样式与事件均不符合个人需要。于是自己重构scroll，为了在vue3中修改scrollLeft，找了很久文档都没找到结果，无论怎样获取及设置xx.value.scrollLeft的值都为0。

# template
<div class='box' ref='box' >
    <div class='content' ref='content'>
    …横向展示的内容
    </div>
</div>

解决办法

样式自己写，主要样式说明

1. box 的display:inline-block,
2. content的display:inline-flex,
3. 以上是这了将content样式获取到他的宽度。只有content div的宽度大于box宽度后才能获得或设置xx.value.scrollLeft

vue3获取$refs元素

vue3中的steup中不能使用this.$refs，具体使用如下:

import {ref} form 'vue'
steup() {
   const box = ref(0) //div中定义的ref变量名
   console.log(box.value.scrollWidth)
}