Javascript scrollIntoView() alineación del medio?

Question

Javascript .scrollIntoView(boolean) proporcionan solo dos opciones de alineación.

1. superior
2. inferior

¿Qué pasa si quiero desplazar la vista de tal manera que. Quiero traer un elemento particular en algún lugar en medio de la página?

Answer 1

Use window.scrollTo() para esto. Obtenga la parte superior del elemento al que desea mover y restar la mitad de la altura de la ventana.

Demostración: 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 2

Usando getBoundingClientRect() es mucho más eficiente que subir cadena principal, y no implica contaminar el ámbito global mediante la extensión de prototipo. Es ampliamente compatible con todos los navegadores.

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

Demostración: http://jsfiddle.net/cxe73c22/

Answer 3

con jQuery utilizo este:

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

} 

Ejemplo:

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

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

Answer 4

Puede hacerlo en dos pasos:

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 

Puede añadir la altura del elemento si desea centrarlo globaly, y no centrar su parte superior:

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

Answer 5

Mejora de la respuesta de @Rohan Orton a trabajar para desplazamiento vertical y horizontal.

El método Element.getBoundingClientRect() devuelve el tamaño de un elemento y su posición relativa a la ventana gráfica.

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

Usando Bitwise operator desplazamiento a la derecha para obtener el valor int después de dividir.

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