2024-02-27 超高高度替换内容后复位滚动位置

昨天出现一个问题：
页面有个两个区块，第一个区块是文字+表格，第二个区块是表格，之间有其他文字说明
现在第一个区块的文字内容很多，高度超长，正常手机屏幕看不完全，需要往下滑动才能看到表格
表格第一列可以点击，点击后替换第一个区块的内容，高度远小于 文字+表格
导致出现 用户点击表格后，因为高度扣去，导致当前视窗视角停留在第二个区块表格处，以为第一个表格跳转的内容是第二个表格

解决：
获取原本第一区块的offsetTop，重新设置scrollTop

遇到的问题：

<div overflow-x> // 可滚动的container
  <div>标头或者其他内容</div>
  <div>
    <div position: rel>
      <div>
        <div position: rel>
          <div>
            第一区块
          </div>
        </div>
      </div>
     </div>
  </div>
  <div>
    // 第二区块
  </div>
</div>

大概展示一下结构，offsetTop的取值依据是最近的position，所以这块直接拿的话，得到的值就是0，显然不符合预期
于是换了一种思路，往上遍历，去拿所有祖先元素的offsetTop并累加，结果是因为层层结构包裹，出现了（通过console查看offsetTop和取值对象）：

1. 重复取值
2. 并没有拿到真正的offsetTop
3. 有的offsetTop范围重复了

最后重新查看Element，无论是哪块内容，最终都由一个<div />包裹，而这些容器都在一个可滚动container里，所以最终去取container子级的offsetTop就行

因为：最终offsetTop的参考点将是最近的滚动元素（比如一个具有 overflow: scroll 的元素）或者 body/html