为什么设置了scrollTop在页面上没有效果?

7 阅读1分钟

下面来记录一下在实际开发中遇到的场景bug

这种场景正好符合经典的面试题考察的知识点也是让小女子我遇上了,又又又加深了印象~

bug:支持搜索有锚点的下拉框,当关闭菜单栏之后再清空内容,重新打开下拉框,菜单内容丢失

代码层面:前端实现逻辑为虚拟列表,动态更新可视区域数据,清空则将包装所有数据的盒子scrollTop置为0,实现清空值置顶的效果

分析原因:

  • 当菜单栏关闭时,对应盒子display:none;虽然在DOM树中能找到,但是渲染树已经不存在了,不占据空间,没有高度;所以在关闭时清空值设置scrolltop是无效的。
  • 滚动条不会置于最顶层,保留关闭之前的位置,但是可视区域的数据已经更新为顶部数据,滚动位置与展示数据不对应,造成菜单数据丢失。

解决方案: 统一在菜单渲染出来之后根据空值判断执行置顶(scrollTo(0))的逻辑