Javascript scrollIntoView() middle alignment?

Question

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

1. top
2. bottom

What if I want to scroll the view such t

Answer 1

With JQuery I use this:

function scrollToMiddle(id) {

    var elem_position = $(id).offset().top;
    var window_height = $(window).height();
    var y = elem_position - window_height/2;

    window.scrollTo(0,y);

}

Example:

<div id="elemento1">Contenido</div>

<script>
    scrollToMiddle("#elemento1");
</script>

Answer 2

Use window.scrollTo() for this. Get the top of the element you want to move to, and subtract one half the window height.

Demo: http://jsfiddle.net/ThinkingStiff/MJ69d/

Element.prototype.documentOffsetTop = function () {
    return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
};

var top = document.getElementById( 'middle' ).documentOffsetTop() - ( window.innerHeight / 2 );
window.scrollTo( 0, top );

Answer 3

Improving the answer of @Rohan Orton to work for vertical and horizontal scroll.

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

var ele = $x("//a[.='Ask Question']");
console.log( ele );

scrollIntoView( ele[0] );

function scrollIntoView( element ) {
    var innerHeight_Half = (window.innerHeight >> 1); // Int value
                        // = (window.innerHeight / 2); // Float value
    console.log('innerHeight_Half : '+ innerHeight_Half);

    var elementRect = element.getBoundingClientRect();

    window.scrollBy( (elementRect.left >> 1), elementRect.top - innerHeight_Half);
}

Using Bitwise operator right shift to get int value after dividing.

console.log( 25 / 2 ); // 12.5
console.log( 25 >> 1 ); // 12

Answer 4

Scrolling to the middle of an element works well if its parent element has the css: overflow: scroll;

If it's a vertical list, you can use document.getElementById("id").scrollIntoView({block: "center"}); and it will scroll your selected element to the vertical middle of the parent element.

Cheers to Gregory R. and Hakuna for their good answers.

Further Reading:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

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

Answer 5

It is possible to use getBoundingClientRect() to get all the information you need to achieve this. For example, you could do something like this:

const element = document.getElementById('middle');
const elementRect = element.getBoundingClientRect();
const absoluteElementTop = elementRect.top + window.pageYOffset;
const middle = absoluteElementTop - (window.innerHeight / 2);
window.scrollTo(0, middle);

Demo: http://jsfiddle.net/cxe73c22/

This solution is more efficient than walking up parent chain, as in the accepted answer, and doesn't involve polluting the global scope by extending prototype (generally considered bad practice in javascript).

The getBoundingClientRect() method is supported in all modern browser.

Answer 6

To support all options in scrollIntoViewOptions for all browsers it's better to use seamless-scroll-polyfill (https://www.npmjs.com/package/seamless-scroll-polyfill)

Worked for me.

Here is a link with explanation https://github.com/Financial-Times/polyfill-library/issues/657