Javascript scrollIntoView（）中間對齊？

Question

Javascript .scrollIntoView(boolean)只提供兩個對齊選項。

1. 頂部
2. 底部

如果我想滾動視圖這樣。我想在頁面中間某個地方添加特定元素？

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

Answer 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/

Answer 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> 

Answer 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 

可以添加元素的高度，如果你想globaly居中，而不是中心的頂部：

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

Answer 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