今天遇到了一个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