0

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

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

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

所以,我然后尝试使用

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

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

我知道这scrollIntoView将是我最好的选择,但不确定如何防止元素在固定标题下方滚动。任何帮助表示赞赏。

4

1 回答 1

0

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

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

window.scrollTo({ top: position, behavior: 'smooth'});
于 2020-03-11T21:44:19.687 回答