Javascript scrollIntoView()中间对齐？

Question

Javascript .scrollIntoView(boolean)只提供两个对齐选项.

1. 最佳
2. 底部

如果我想滚动视图怎么办？我想把特定元素带到页面中间的某个地方？

Answer 1

可以使用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/

这个解决方案比在父链上行走更有效,就像在接受的答案中一样,并且不涉及通过扩展原型来污染全局范围(通常被认为是javascript中的不良做法).

getBoundingClientRect()所有现代浏览器都支持该方法.

Answer 2

试试这个 :

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

有关更多信息和选项,请参阅此处:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 3

使用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 4

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

Answer 5

如果其父元素具有 css，则滚动到元素的中间效果很好： overflow: scroll;

如果它是一个垂直列表，您可以使用document.getElementById("id").scrollIntoView({block: "center"});它，它会将您选择的元素滚动到父元素的垂直中间。

为 Gregory R. 和 Hakuna 的好答案干杯。

进一步阅读：

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

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

Answer 6

您可以分两步完成:

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

如果要将其置于球体中心,并且不将其顶部居中,则可以添加元素的高度:

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