not - Javascript scrollIntoView() alineación del medio?

scrollintoview is not a function

Question

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

1. parte superior
2. fondo

¿Qué sucede 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

Con JQuery, uso esto:

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 3

Usar getBoundingClientRect() es mucho más eficiente que caminar por la cadena de padres, y no implica contaminar el alcance global mediante la extensión de prototipos. 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 4

Puedes 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 agregar la altura del elemento si desea centrarlo globalmente, 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

Mejorando la respuesta de @Rohan Orton para trabajar en 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);
}

Al usar el Bitwise operator derecha para obtener el valor int después de dividir.

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