Javascript scrollIntoView() среднее выравнивание?

Ответ 1

Используйте для этого window.scrollTo(). Получите верхнюю часть элемента, который вы хотите переместить, и вычтите половину высоты окна.

Демо: 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 );

Ответ 2

Использование getBoundingClientRect() гораздо эффективнее, чем хождение по родительской цепочке, и не связано с загрязнением глобальной области, расширяя прототип. Он широко поддерживается в браузерах.

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);

Демо: http://jsfiddle.net/cxe73c22/

Ответ 3

С помощью JQuery я использую это:

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);

}

Пример:

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

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

Ответ 4

Вы можете сделать это в два этапа:

myElement.scrollIntoView(true);
var viewportH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scrollBy(0, -viewportH/2); // Adjust scrolling with a negative value here

Вы можете добавить высоту элемента, если хотите центрировать его глобально, а не центрировать его сверху:

myElement.scrollIntoView(true);
var viewportH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scrollBy(0, (myElement.getBoundingClientRect().height-viewportH)/2);

Ответ 5

Улучшение ответа @Rohan Orton на вертикальную и горизонтальную прокрутку.

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно окна просмотра.

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);
}

Используя Bitwise operator правый сдвиг, чтобы получить значение int после деления.

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