javascript - element.scrollIntoView cuts off the top - Stack Overflow

admin管理员组

文章数量:1394133

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?

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?

• javascript
• js-scrollintoview

Share Improve this question Follow edited Jul 31, 2022 at 7:29 Ouroborus 16.9k88 gold badges4040 silver badges6565 bronze badges asked Jul 31, 2022 at 7:23 Jamzy01Jamzy01 33766 silver badges1818 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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.

本文标签： javascriptelementscrollIntoView cuts off the topStack Overflow