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

我有一个固定页眉的页面。在那个页面上，我有一个表，它的功能是当点击一行时，页面滚动到那个元素。每个表行都有一个与元素id匹配的id。因此，单击，我获取元素id，然后执行此函数

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

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

于是，我试着用

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

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

---

我知道

scrollIntoView

将是我的最佳选择，但不确定如何防止元素在固定标题下滚动。非常感谢您的帮助。

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

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

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

---

由于手机上的url栏，我也遇到了类似的问题。解决此问题的一种非完美方法是在第一个方法完成后再次调用scrollTo方法。不确定，但它可能会对您有所帮助。使用scrollTo的问题是每个设备上的

offsetTop

不同。即使添加第二个scrollTo方法，它也可能在桌面上工作，但在其他桌面上不工作。我以前试过。没用。它不会滚动到元素的顶部。