element.scrollIntoView截断顶部

Question

我正在尝试使用JavaScript中的.scrollIntoView()函数将元素滚动到视图中。

section.reference.value.scrollIntoView(
{
behavior: "smooth",
"block": "start",
"inline": "start"
}
);

它几乎完美地工作，它滚动显示元素所需的所有内容，只是它总是将其截断大约10倍，而且我认为在滚动时没有给它偏移的选项。

有人知道怎么做吗？

Answer 1

要使用JavaScript scrollIntoView进行带偏移量的平滑滚动，可以使用具有top和behavior属性的对象调用scrollTo。

const element = document.getElementById("targetElement"); // Your target element
const headerOffset = 45;
const elementPosition = element.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth",
});

Answer 2

我通过在该元素内创建一个临时元素来解决这个问题，并使用相对定位来移动它以考虑我自己的偏移量，然后立即删除它。