这里记录工作中遇到的技术点，以及自己对生活的一些思考，周三或周五发布。
封面图
背景
业务代码的开发过程中，我们有时候会遇到一些很小，但是很精致的需求。
标题中描述的场景适用于表单内容项很多，比如几十或者上百条的时候，需要我们滚动表单内容才能找到我们要想要修改的表单项。
也有可能是表格一次展示了百十条数据，需要前端搜索某一项，滚动该项到可视区域内。
大致的图形描述如下:
比如上图中dog超出了在可视区域的下方，则需要填写该数据时，在页面上进行搜索，让dog显示到可视容器内。
技术分析
元素滚动
滚动到指定位置，必然要用到ELEMENT.scrollTop或者ELEMENT.scrollTo(X,Y)。
鉴于我们这里只需要进行上下滚动，所以选中element.scrollTop属性进行设置即可。
需要注意的是:
scrollTop属性只能设置在本身包含滚动条的元素上，否则不起作用。因为包含滚动条的容器，含有overflow:scroll或者overflow:auto属性。
比如有如下代码：
<div class="scroll-wrapper">
<div class="scroll-content">
<div class="scroll-inner">
<div class="test-area"></div>
</div>
</div>
</div>
<style>.scroll-wrapper{
width:400px;
height:500px;
overflow:hidden;
}
.scroll-content{
width:100%；
height：500px;
overflow:auto;
}
.scroll-inner{
width:100%;
height:1000px;
}
</style>
则设置scrollTop属性时，需要设置在class名为scroll-content的dom元素上。设置在scroll-inner上，则不起作用。
vue3选中真实dom
选中真实dom有两种方式。
一种是用原生JS，document.getElemtById()或者document.getElmentByClassName()以及document.getElementByTagName()。
另外外一种是用vue3的ref属性。需要结合getCurrentInstance()方法使用。
getCurrentInstance()用来获取当前的组件实例。
需要注意的是：getCurrentInstance()只能在 setup 或生命周期钩子中调用。
计算位置
位置计算需要我们获取滚动容器的位置信息，以及我们查询到的元素的位置信息，分不同的情况进行计算。
情况一，查询元素位于滚动容器之下：
这时候需要滚动容器向上滚动，滚动的距离计算方式大致是：
let {height} = scrollContent.getBoundingClientRect()
constgetBoundingClientRect()用来获取元素的大小及其相对于视口的位置。
情况二，查询元素位于滚动容器之上：
这时候需要滚动容器向下滚动，滚动的距离计算方式大致是：
// 当前滚动容器的scrollTop - 查询元素超出容器的高度
let currentScrollTop = scrollContent.scrollTop
const
距离的计算，可以根据具体的需要进行合适的计算即可。
其他需要注意的问题
因为我们在进行业务开发时，经常使用第三方UI组件库。当我们用ref直接设置到组件库中的组件时，比如Button,ref获取到的其实是这个组件对象，并非直接获取到真实的DOM元素。
所以，在绑定时，需要我们在外面多加一层div,用来获取真实的DOM。然后通过实例的refs属性，匹配到我们查询的key即可。
示例代码：
import {getCurrentInstance} from 'vue
const instance = getCurrentInstance()
const searchAction = (searchVal) => {
let searchDom = instance.refs[`${searchVal}`]
let scrollContent= instance.refs.scrollContent
let currentScrollTop = scrollContent.scrollTop
const searchDomDistanceInfo = searchDom.getBoundingClientRect()
const scrollContenDistanceInfo = scrollContent.getBoundingClientRect()
if(顶部超出){
// 计算距离 设置scrollContent.scrollTop属性
}else if(底部超出){
// 计算距离 设置scrollContent.scrollTop属性
}
...
}最后
全文完，如果喜欢。
请点赞吧，最好也加个"关注"，或者分享到朋友圈。