CODEWITHSUNDEEP
javascriptjs-scrollintoview
Jamzy01
Jamzy01

Reputation: 327

element.scrollIntoView cuts off the top

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?

Upvotes: 4

Views: 5988

Answers (2)

Sanket Shah
Sanket Shah

Reputation: 3091

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",
});

Upvotes: 4

Jamzy01
Jamzy01

Reputation: 327

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.

Upvotes: 1

Related Questions