Javascript scrollIntoView() middle alignment?

javascript js-scrollintoview
Dhruv Bansal picture Dhruv Bansal · Jan 19, 2012 · Viewed 76.1k times · Source

Javascript .scrollIntoView(boolean) provide only two alignment option.

  1. top
  2. bottom

What if I want to scroll the view such that. I want to bring particular element somewhere in middle of the page?

Answer

hakuna picture hakuna · May 21, 2018

try this : 

 document.getElementById('myID').scrollIntoView({
            behavior: 'auto',
            block: 'center',
            inline: 'center'
        });

refer here for more information and options : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Related questions

Does scrollIntoView work in all browsers?

Does scrollIntoView() work in all browsers? If not is there a jQuery alternative?

Read More
JavaScript scrollIntoView smooth scroll and offset

I have this code for my website: function clickMe() { var element = document.getElementById('about'); element.scrollIntoView({ block: 'start', behavior: 'smooth', }); } This works pretty nice but I have a fixed header so when the code scrolls to the element the header …

Read More
Using document.querySelector in React? Should I use refs instead? How?

I am building a carousel right now, in React. To scroll to the individual slides I am using document.querySelector like so : useEffect(() => { document.querySelector(`#slide-${activeSlide}`).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); }, [activeSlide]); Is this bad practice? …

Read More