第107期：前端搜索列表中某一项并滚动到可视区域

terrence386

发布于 2022-07-15 11:34:05

1.6K0

发布于 2022-07-15 11:34:05

文章被收录于专栏：JavaScript高级程序设计JavaScript高级程序设计

背景

业务代码的开发过程中，我们有时候会遇到一些很小，但是很精致的需求。

标题中描述的场景适用于表单内容项很多，比如几十或者上百条的时候，需要我们滚动表单内容才能找到我们要想要修改的表单项。

也有可能是表格一次展示了百十条数据，需要前端搜索某一项，滚动该项到可视区域内。

大致的图形描述如下:

image.png

比如上图中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 或生命周期钩子中调用。

计算位置

位置计算需要我们获取滚动容器的位置信息，以及我们查询到的元素的位置信息，分不同的情况进行计算。

情况一，查询元素位于滚动容器之下：

image.png

这时候需要滚动容器向上滚动，滚动的距离计算方式大致是：

let {height} = scrollContent.getBoundingClientRect()
const scrollDistance = bottom2-bottom1 + height

getBoundingClientRect()用来获取元素的大小及其相对于视口的位置。

情况二，查询元素位于滚动容器之上：

image.png

这时候需要滚动容器向下滚动，滚动的距离计算方式大致是：

// 当前滚动容器的scrollTop - 查询元素超出容器的高度
let currentScrollTop = scrollContent.scrollTop
const scrollDistance = currentScrollTop - top2 - top1

距离的计算，可以根据具体的需要进行合适的计算即可。

其他需要注意的问题

因为我们在进行业务开发时，经常使用第三方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属性
    }
    ...
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-07-09，如有侵权请联系 cloudcommunity@tencent.com 删除

容器