滚动10像素顶部到特定的div

Question

I have written below code to scroll top to particular div and it is working fine. But I want to scroll 10px more on the particular fields. On click of submit button it is scrolling to the error block, but complete filed is not visible. How do we scroll more to the targeted class.

public scrollIntoError(formId: string): void {
  setTimeout(() => {
    const selector = "#" + formId + " .error-class";
    const firstElementWithError = document.querySelector(selector);
    this.scrollToError(firstElementWithError);
  }, NumberConstants.HUNDRED);
} 

public scrollToError(el: Element): void {
  if (el) {
    el.scrollIntoView({behavior: "smooth"});
  }
} 

Above code is working fine but I want to scroll top 10 px more on the selected class.

Edit

Page dosent have any scroll bar only the middle section which has forms has scroll.

Answer 1

This will scroll smooth in once:

public scrollToError(el: Element): void {
    if (el) {
        el.scroll({
            top: el.scrollTop - 10, 
            left: 0,
            behavior: 'smooth'
        });
    }
} 

Answer 2

You can execute one more statement for that:

public scrollToError(el: Element): void {
  if (el) {
    el.scrollIntoView({behavior: "smooth"});
    el.scrollBy(0, 10);
  }
}