element.scrollIntoView cuts off the top

Question

I am trying to scroll elements into view using the .scrollIntoView() function in JavaScript.

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

It almost works perfectly, it scrolls everything necessary to show the element, except it always cuts it off by about 10px, and I don't think there is an option to give it an offset when scrolling.

Does anyone know how to do this?

Answer 1

To use JavaScript scrollIntoView to do smooth scroll with offset, you can call scrollTo with an object that has the top and behavior properties.

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

I fixed this by just creating a temporary element inside that element, and moving it using relative positioning to account for my own offset, then deleting it right after.