Javascript scrollIntoView() allineamento medio?

Question

Javascript .scrollIntoView(boolean) fornisce solo due opzioni di allineamento.

1. superiore
2. fondo

Che cosa devo fare per far scorrere la vista in modo tale che. Voglio portare un elemento particolare da qualche parte nel mezzo della pagina?

Answer 1

Utilizzare window.scrollTo() per questo. Ottieni la parte superiore dell'elemento in cui vuoi spostarti e sottrai una metà dell'altezza della finestra.

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 2

Utilizzando getBoundingClientRect() è di gran lunga più efficiente di camminare su catena di genitore, e non comporta inquinare la portata globale estendendo prototipo. È ampiamente supportato tra i browser.

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/

Answer 3

con jQuery Io uso questo:

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

} 

Esempio:

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

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

Answer 4

Si può fare in due fasi:

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 

.210

È possibile aggiungere l'altezza dell'elemento, se si desidera centrarlo globaly, e non centrare la sua cima:

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

Answer 5

Migliorare la risposta di @Rohan Orton a lavorare per scorrimento verticale e orizzontale.

Il metodo Element.getBoundingClientRect() restituisce la dimensione di un elemento e la sua posizione rispetto al 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); 
} 

Utilizzando Bitwise operator spostamento a destra per ottenere il valore int dopo aver diviso.

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