Javascript scrollIntoView（）中间对齐？

Javascript

.scrollIntoView（布尔）

只提供两个对齐选项

顶

底部

如果我想滚动视图，这样会怎么样。我想将特定元素放在页面中间的某个位置？

为此使用

window.scrollTo（）

。获取要移动到的图元的顶部，并减去窗高的一半

演示：

Element.prototype.documentOffsetTop=函数（）{
返回this.offsetTop+（this.offsetParent？this.offsetParent.documentOffsetTop（）：0）；
};
var top=document.getElementById（'middle'）.documentOffsetTop（）-（window.innerHeight/2）；
滚动到（0，顶部）；

可以使用获取实现此目的所需的所有信息。例如，您可以这样做：

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

演示：

这个解决方案比向上走父链（如公认的答案所示）更有效，并且不涉及通过扩展prototype（）来污染全局范围

---

所有现代浏览器都支持

getBoundingClientRect（）

方法。

对于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>

Contenido
卷轴中间（“#elemento1”）；

您可以通过两个步骤完成：

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

---

改进

@Rohan-Orton

的答案以进行垂直和水平滚动

该方法返回元素的大小及其相对于视口的位置

var ele=$x（“//a[.='Ask Question']”）；
控制台日志（ele）；
scrollIntoView（元素[0]）；
函数scrollIntoView（元素）{
var innerHeight_Half=（window.innerHeight>>1）；//Int值
//=（window.innerHeight/2）；//浮点值
console.log（'innerHeight_-Half:'+innerHeight_-Half）；
var elementRect=element.getBoundingClientRect（）；
scrollBy（（elementRect.left>>1），elementRect.top-innerHeight_-Half）；
}

使用right shift在除法后获取int值

控制台日志（25/2）；//12.5 console.log（25>>1）；//12 试试这个：

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

---

有关更多信息和选项，请参阅此处：

当滚动窗口/文档以外的容器时，此页面上的任何解决方案都不起作用。

getBoundingClientRect

方法在绝对定位元素时失败

在这种情况下，我们需要首先确定可滚动的父对象，并滚动它而不是窗口。这是一个适用于所有当前浏览器版本的解决方案，甚至可以与IE8和朋友一起使用。诀窍是将元素滚动到容器顶部，以便我们准确地知道它在哪里，然后减去屏幕高度的一半

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

---

如果某个元素的父元素具有css:

overflow:scroll，则滚动到该元素的中间效果良好

如果它是一个垂直列表，那么可以使用
document.getElementById（“id”）.scrollIntoView（{block:“center”}），它会将所选元素滚动到父元素的垂直中间

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

进一步阅读：


要支持所有浏览器的
滚动查看选项中的所有选项，最好使用无缝滚动多边形填充（）

为我工作

这是一个带有解释的链接
沿着整个父链走有点低效我喜欢
offsetTop-（container/2）
。很简单，但我没有想到。这在网络视图中不起作用，所以我选择了一个末端带有#target且没有中心的假URI，这是最好的答案。只有Chrome和Opera完全支持块和内联，甚至smoothscroll polyfill也不支持。这是我们想要的解决方案，但遗憾的是不可行。我在IE11、Firefox、Chrome和Safari的Angular 5项目中使用了相同的解决方案。@Sri7 Safari、IE和Edge不理解
scrollIntoView
的对象选项，他们想做什么就做什么。即使是最新版本；我刚刚又测试了一次。我可以确认这在今天的移动safari上不起作用。window.scrollBy有效。遗憾的是，这与绝对定位的元素不同。当元素位于可滚动的容器中而不是页面中时，您能否编辑您的答案以包括如何执行此操作？我尝试过：在这个解决方案的帮助下解决了这一问题，对我来说，这是2018年的最佳答案。首先使用普通的“scrollIntoView”，因为Firefox36到58中的“中心”选项被破坏，IE不支持这些选项，请参见此。然后你可以通过计算半个视口来居中滚动，并将滚动移动到那里。我需要一个固定标题的垂直滚动表，这对我来说很有用。
document.getElementById("id").scrollIntoView({block: "center"});