Different behaviour when called via a click vs programatically

[pareeksubodh]

This library is working great when I click an element to scroll to, but when I call the same function programatically with key up/down or some ui buttons, it doesn't end up in the same position.

Have recorded a screen capture, you'll notice it works fine when clicking on an element, with the programatic call it actually works okay when going up but not when going down, the element just hides below the edge a little bit. Not sure what could be the difference on a click vs not.

scroll-polyfill-issue.mp4

I have tried to also call the element into focus explicitly, and using a scroll-margin property, neither have had any effect.

export function scrollToElement(id: string) {
  const element = document.getElementById(id);
  if (element) {
    element.focus()
    scrollIntoView(element, {
      behavior: "smooth",
      block: "center",
    });
  }
}