How to scroll an element into center of window when it's the "last element" on the page

I have a bunch of div elements that contain text and inputs. The first div is always visible. Whenever a div‘s input changes, next div becomes visible. I want to automatically scroll down the window as these new divs become visible, preferably having the last visible div in the vertical-center of the screen.

element.scrollIntoView({block: 'center'}) generally works, but it makes the top of the last visible div at the bottom of the window, so the user is forced to scroll further to see the inputs inside the div. I want the last div‘s top to be in the center of the window and have empty space underneath the div until the next div is revealed. Is there a way to do this?

8 thoughts on “How to scroll an element into center of window when it's the "last element" on the page”

Leave a Comment