How do you scroll a set number of pixels past an object?

Question

Suppose I wanted to scroll to an object, but I wanted it to go, say, 50 pixels further. I know the following would work:

document.getElementById("foo").scrollIntoView();
document.documentElement.scrollTop += 50;

But that looks a bit bodgy. It's hard to read, and I suspect it will run slightly slower, as it's scrolling twice instead of once.

Is there a one-liner that does the same thing? Something like

document.documentElement.scrollTop = document.getElementById("foo").fooDistance + 50;

I know fooDistance is wrong. What's the correct version?

I tried looking on this list but couldn't see anything that looked right.

score 0 · Answer 1 · answered Mar 19 '21 at 00:18

0

var posY = element.getBoundingClientRect().top;
window.scrollTo(0, posY+50);

answered Mar 19 '21 at 00:18

123

getBoundingClientRect().top is incorrect. It measures the location of an object as displayed on the screen, not the location of an object on the page. – Jonathon Philip Chambers Mar 20 '21 at 02:23

1 Answers1