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?

Se following question/answer: https://stackoverflow.com/questions/24665602/scrollintoview-scrolls-just-too-far — ninja, Apr 16 '18 at 13:57

score 174 · Accepted Answer · answered Jan 06 '20 at 11:23

174

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

answered Jan 06 '20 at 11:23

colinux

3,989
2
20
19

1

This is what I've been looking for! Thank you very much! – KShewengger Jan 10 '20 at 07:12
1

Chrome >= 69, FireFox >= 68 [link](https://caniuse.com/#search=scroll-margin) – torvin Apr 17 '20 at 04:26
2

Perfect. In my case, scroll-padding-bottom made sure that scrollIntoView had that buffer in my scrolling element. – foureyedraven Jul 29 '20 at 18:54
11

A bit more specific: `scroll-margin-top: 20px;` – Jules Colle Feb 20 '21 at 12:00
2

Man you killed it! – Dilunga the Great Jan 07 '22 at 11:54

score 9 · Answer 2 · answered Nov 07 '20 at 00:18

9

You can always use scrollTo by first getting the elements coordinates using getBoundingClientRect then adding the scroll offset and taking your scroll margin. e.g.

const moveToBlue = () => {
  const blue = document.getElementById('blue');
  let position = blue.getBoundingClientRect();
  // scrolls to 20px above element
  window.scrollTo(position.left, position.top + window.scrollY - 20);
};

answered Nov 07 '20 at 00:18

wizzfizz94

1,288
15
20

Ah this works perfectly for me. I was using `scrollIntoView` + `scrollMarginTop` but for some reason it didn't apply the margin to the first item in my list. Still not sure why, but using this method works for all cases. – sirclesam Aug 03 '23 at 20:37

score 6 · Answer 3 · answered Dec 24 '20 at 10:06

6

That helped in my case —
HTML

<div class='stick-to-top'></>

Javascript

document.getElementsByClassName('stick-to-top')[0].scrollIntoView({behavior: "smooth", block: "center"});

CSS

.stick-to-top {
 padding-bottom: 400px;
}

answered Dec 24 '20 at 10:06

Mohsin Mahmood

3,238
3
21
25

score 3 · Answer 4 · answered Apr 16 '18 at 14:36

In general it's not very straightforward (if we want behavior: smooth), and will require messing with javascript in one way or another. For example you could use window.scrollTo and calculate necessary top position manually.

In some cases however you could visually achieve necessary effect by using CSS smartly. In your demo you can use padding-top instead of margin and wrap content of the block into additional helper container.

Demo: https://codepen.io/anon/pen/OvKQLV

Better answer: https://stackoverflow.com/a/59611245/13331155 — benhatsor, Jul 11 '21 at 06:28

score 2 · Answer 5 · answered Feb 05 '20 at 12:34

Another potential solution is to scroll not the the element itself, but to one of its previous siblings. Example:

let elementToScrollTo = <yourTargetElement>;
const childOffset = 3;
for (let i = 0; i < childOffset; i++) {
    if (!elementToScrollTo.previousElementSibling) {
       break;
    }
    elementToScrollTo = elementToScrollTo.previousElementSibling;
}
elementToScrollTo.scrollIntoView();

scrollIntoView with margin

5 Answers5

Linked