今天范了了一个很低级的错误，本身想用element ui来做横向滚动条，结果改样式与事件均不符合个人需要。于是自己重构scroll，为了在vue3中修改scrollLeft，找了很久文档都没找到结果，无论怎样获取及设置xx.value.scrollLeft的值都为0。
# template
<div class='box' ref='box' >
<div class='content' ref='content'>
…横向展示的内容
</div>
</div>
解决办法
样式自己写，主要样式说明
- box 的display:inline-block,
- content的display:inline-flex,
- 以上是这了将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)
}
