今天遇到了一个scrollTop设置不起作用的问题,接下来我就阐述一下问题的场景:

首先场景是一个异步树:支持模糊搜索,当搜索到结果时,会有选中效果,但是搜索的结果可能会超出树的显示范围,因此需要手动滑动滚动条到选中位置

但是呢,树节点太多,无法及时到目标位置,因此根据选中位置,将滚动条滑动到目标位置,设置scrollTop。

1:你需要找到滚动条所在的标签位置的层级

<div style= "overflow:auto">
    <div><p>表头</p> <div>
    <div id = "el-tree"> 

    <table>
        <p>树节点<p>
    <table>
</div>
</div>

我操作是 $(#el-tree)的目标,给它设置了半天scrollTop始终不生效,因此排查问题所在,才知道需要找到滚动条目标层级,进行动态设置scrollTop,问题解决

最终代码如下:

 if(offsetTop > 120) {

        $($(#el-tree).parent()).scrollTop(offsetTop - (120/2))

}

注意:offsetTop 就是当前选择节点的属性,以及注意overflow设置为 auto