javascript - 使用 SVG 时，ScrollIntoView 在 Firefox 中出现错误

Question

我有一个垂直长的 SVG 图像，我需要滚动到具有特定 id 的特定元素。

const el = document.getElementById(id);
el.scrollIntoView({
  behavior: 'smooth',
  block: 'center'
});

这在 chrome 中工作正常，但 Firefox 滚动到 SVG 文件的顶部，而不是所选元素。

我在 stackblitz 中重现了这个错误:

https://stackblitz.com/edit/react-wkoiwq

https://react-wkoiwq.stackblitz.io

在 chrome 中，#hotplate 元素被移动到中心，而在 firefox 中，SVG 的顶部被移动到中心。

尝试改变 center，start 和 end 看看效果。

有没有办法解决/避免这个问题？

Answer 1

也许手动执行是正确的解决方案:

• el.getBoundingClientRect().top获取相对于视口(viewport)的位置。
• window.pageYOffset获取当前视口(viewport)偏移量。
• document.clientHeight获取视口(viewport)高度(没有滚动条)
• 计算所需的偏移量(相对于文档元素)，并使用window.scrollTo滚动。

例如:

var el = document.getElementById("hotplate");

// { block: "top" } behavior:
let newScrollY = window.pageYOffset + el.getBoundingClientRect().top;

// adjust to behave like { block: "center" }
newScrollY = newScrollY - document.documentElement.clientHeight/2;

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