替代 html offsetTop答案

【问题标题】：Alternative to html offsetTop替代 html offsetTop
【发布时间】：2020-04-22 11:47:43
【问题描述】：

我在我的解决方案中使用了 offsetTop，如下所示。

public getOffsetTop = element => {
       let offsetTop = 0;
       while (element) {
         offsetTop += element.offsetTop;
         element = element.offsetParent;
       }
    return offsetTop;
  };

const field = document.getElementById("error");
const totalOffsetTop = this.getOffsetTop(field);

window.scrollTo({
        top: totalOffsetTop,
        behavior: "smooth"
      });

这很顺利。每当出现错误时，我都可以自动滚动回错误字段。然而，真正的问题来了。 offsetTop 是实验性的，不应在生产中使用。 https://caniuse.com/#feat=mdn-api_htmlelement_offsettop

我尝试使用 getBoundingClientRect().top 但它不会滚动回错误字段。谁能推荐一个更好的选择？？

【问题讨论】：

标签： javascript html reactjs dom

【解决方案1】：

只是为了帮助别人，我试过了，它奏效了。

public getOffsetTop = element => {
      const rect = element.getBoundingClientRect();
      const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop;
      return rect.top + scrollTop;
  };

【讨论】：

【解决方案2】：

Element.scrollIntoView() 呢？

你可以：

document.getElementById("error").scrollIntoView({ behavior: 'smooth' });

【讨论】：