页面内容重新流动时保持当前元素在视图中

Question

我有一组

details/summary

元素，带有 JavaScript 自动关闭功能以保持页面排序 - 请参阅 https://codepen.io/perllaghu/pen/BaXwQOQ 作为演示。

我的问题是，当您打开较早的条目（尝试 1、2 或 3），然后打开较晚的条目（尝试 4b 之后的任何内容）时，摘要数据的顶部 [以及焦点] 最终会偏离页面顶部。

当

details

内容的长度不同时，跳跃在视觉上会更差。

有没有人有一个聪明的方法来将新打开的项目的顶部保持在光标点，或者至少在当前视口内？

Answer 1

非常感谢@Giovanni - 一个很好的明显的[回顾]解决方案...并在 Firefox、Chromium、Edge 和 Polypane 中进行了测试。

笔已更新....