Javascript scrollIntoView() canh giữa?

Question

Javascript .scrollIntoView(boolean) chỉ cung cấp hai tùy chọn căn chỉnh.

1. đầu
2. đáy

gì nếu tôi muốn di chuyển quan điểm như vậy mà. Tôi muốn đưa yếu tố cụ thể ở đâu đó vào giữa trang?

Answer 1

Sử dụng window.scrollTo() cho việc này. Lấy phần đầu của phần tử bạn muốn di chuyển đến và trừ đi một nửa chiều cao cửa sổ.

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

Sử dụng getBoundingClientRect() là xa hiệu quả hơn so với đi bộ lên chuỗi phụ huynh, và không liên quan đến ô nhiễm phạm vi toàn cầu bằng cách mở rộng nguyên mẫu. Nó được hỗ trợ rộng rãi trên các trình duyệt.

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

Với JQuery tôi sử dụng này:

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

} 

Ví dụ:

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

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

Answer 4

Bạn có thể làm điều đó trong hai bước:

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

Bạn có thể thêm chiều cao của nguyên tố này nếu bạn muốn căn giữa tổng thể, chứ không phải tập trung đầu của nó:

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

Answer 5

Cải thiện câu trả lời của @Rohan Orton làm việc cho cuộn dọc và ngang.

Phương thức Element.getBoundingClientRect() trả về kích thước của phần tử và vị trí của nó so với chế độ xem.

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

Sử dụng Bitwise operator thay đổi ngay để có được giá trị int sau khi chia.

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