javascript - Javascript scrollIntoView() 中央揃え?

Question

Javascript.scrollIntoView(boolean)は 2 つの配置オプションのみを提供します。

1. 上
2. 下

そのようにビューをスクロールしたい場合はどうなりますか。ページの途中に特定の要素を配置したいですか?

Answer 1

これを試して ：

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

詳細とオプションについては、こちらを参照してください: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 2

Use window.scrollTo() for this. Get the top of the element you want to move to, and subtract one half the window height.

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 3

scrollIntoViewOptionsすべてのブラウザーですべてのオプションをサポートするには、 seamless-scroll-polyfill ( https://www.npmjs.com/package/seamless-scroll-polyfill )を使用することをお勧めします。

私のために働いた。

ここに説明付きのリンクがあります https://github.com/Financial-Times/polyfill-library/issues/657