scrollIntoView with margin

Issue

I have a webpage on which I would like to scroll to a certain element.

That part works fine by using scrollIntoView; but I would like to add a bit of space above the element (20px or something)

I'm currently doing something like this:

const moveToBlue = () => {
  const blue = document.getElementById('blue')
  blue.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start'});
};

I would however like to scroll futher 20px up (see my demo here)

Is this possible?

Solution

You can set scroll-margin CSS property on the scroll target element. For example

.blue {
  scroll-margin: 20px;
}

(or more specifically scroll-margin-top or scroll-margin-bottom)

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin

Answered By - colinux