Căn giữa Javascript scrollIntoView ()?

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

1. hàng đầu
2. đáy

Điều gì sẽ xảy ra nếu tôi muốn cuộn chế độ xem như vậy. Tôi muốn đưa yếu tố cụ thể vào đâu đó ở giữa trang?

Sử dụng window.scrollTo()cho việc này. Lấy phần trên cùng 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 );

thử cái này :

 document.getElementById('myID').scrollIntoView({
            behavior: 'auto',
            block: 'center',
            inline: 'center'
        });

tham khảo tại đây để biết thêm thông tin và các tùy chọn: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Có thể sử dụng getBoundingClientRect()để lấy tất cả thông tin bạn cần để đạt được điều này. Ví dụ, bạn có thể làm điều gì đó như sau:

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

Bản giới thiệu: http://jsfiddle.net/cxe73c22/

Giải pháp này hiệu quả hơn so với việc lập chuỗi mẹ, như trong câu trả lời được chấp nhận và không liên quan đến việc gây ô nhiễm phạm vi toàn cầu bằng cách mở rộng nguyên mẫu ( thường được coi là hành vi xấu trong javascript ).

Các getBoundingClientRect()phương pháp được hỗ trợ trong tất cả các trình duyệt hiện đại.

Bạn có thể thực hiện theo 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

Bạn có thể thêm chiều cao của phần tử nếu bạn muốn căn giữa nó toàn cục và không căn giữa phần trên:

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

document.getElementById("id").scrollIntoView({block: "center"});

Với JQuery, tôi sử dụng cái 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);

}

Thí dụ:

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

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

Cuộn đến giữa phần tử hoạt động tốt nếu phần tử mẹ của nó có css: overflow: scroll;

Nếu đó là danh sách dọc, bạn có thể sử dụng document.getElementById("id").scrollIntoView({block: "center"}); và nó sẽ cuộn phần tử đã chọn của bạn đến giữa theo chiều dọc của phần tử mẹ.

Chúc mừng Gregory R. và Hakuna vì những câu trả lời hay của họ.

Đọc thêm:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

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

Phương thức Element.getBoundsClientRect () trả về kích thước của một phần tử và vị trí của nó so với khung nhìn.

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 operatordịch chuyển phải để nhận giá trị int sau khi chia.

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

Không có giải pháp nào trên trang này hoạt động khi một vùng chứa không phải cửa sổ / tài liệu được cuộn. Cách getBoundingClientRecttiếp cận không thành công với các yếu tố được định vị tuyệt đối.

Trong trường hợp đó, chúng ta cần xác định cha mẹ có thể cuộn trước và cuộn nó thay vì cửa sổ. Đây là một giải pháp hoạt động trên tất cả các phiên bản trình duyệt hiện tại và thậm chí sẽ hoạt động với IE8 và bạn bè. Bí quyết là cuộn phần tử lên đầu vùng chứa để chúng ta biết chính xác vị trí của nó, sau đó trừ đi một nửa chiều cao của màn hình.

function getScrollParent(element, includeHidden, documentObj) {
    let style = getComputedStyle(element);
    const excludeStaticParent = style.position === 'absolute';
    const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;

    if (style.position === 'fixed') {
        return documentObj.body;
    }
    let parent = element.parentElement;
    while (parent) {
        style = getComputedStyle(parent);
        if (excludeStaticParent && style.position === 'static') {
            continue;
        }
        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
            return parent;
        }
        parent = parent.parentElement;
    }

    return documentObj.body;
}

function scrollIntoViewCentered(element, windowObj = window, documentObj = document) {
    const parentElement = getScrollParent(element, false, documentObj);
    const viewportHeight = windowObj.innerHeight || 0;

    element.scrollIntoView(true);
    parentElement.scrollTop = parentElement.scrollTop - viewportHeight / 2;

    // some browsers (like FireFox) sometimes bounce back after scrolling
    // re-apply before the user notices.
    window.setTimeout(() => {
        element.scrollIntoView(true);
        parentElement.scrollTop = parentElement.scrollTop - viewportHeight / 2;
    }, 0);
}

Để hỗ trợ tất cả các tùy chọn scrollIntoViewOptionscho tất cả các trình duyệt, tốt hơn nên sử dụng liền mạch-cuộn-polyfill ( https://www.npmjs.com/package/seamless-scroll-polyfill )

Đã làm cho tôi.

Đây là liên kết kèm theo lời giải thích https://github.com/Financial-Times/polyfill-library/issues/657