单击表格行时如何滚动到页面上具有固定标题的元素？

Question

我有一个具有固定标题的页面。在该页面上，我有一个表格，其功能是当单击一行时，页面滚动到该元素。每个表行都有一个与元素 id 匹配的 id。所以点击时，我获取元素的 id，然后执行这个函数

element.scrollIntoView({block: 'start', behavior: 'smooth'})

这种方法的问题是滚动距离太远，元素的某些部分隐藏在固定标题下方。我查看了很多有关堆栈溢出的解决方案，但没有一个适合我。我希望滚动在元素顶部结束。

所以，我尝试使用

element.scrollTo({top: element.offsetTop, behavior: 'smooth})

我做了一些计算，例如考虑填充/边距，并让它发挥作用。问题是 offsetTop 在不同设备上是不同的。上述逻辑不适用于手机和平板电脑。 offsetTop 是当前元素相对于 offsetParent 顶部的距离，每个设备都不相同。

我知道

scrollIntoView

将是我最好的选择，但不确定如何防止元素在固定标题下方滚动。如有任何帮助，我们将不胜感激。

Answer 1

我已经进行了一些测试和研究，也许这就是您所需要的。

const position = element.getBoundingClientRect().top + window.pageYOffset - header.clientHeight;

window.scrollTo({ top: position, behavior: 'smooth'});

Answer 2

我也面临同样的问题，如果你有解决方案请分享。