scrollIntoView with margin

Question

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?

Answer 1

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

.blue {   scroll-margin: 20px; } 

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