103

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

  1. 最佳
  2. 底部

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

4

10 回答 10

136

试试这个 ：

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

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

于 2018-05-21T17:31:49.863 回答
80

可以使用它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()方法。

于 2016-04-08T12:12:51.570 回答
53

用于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 );
于 2012-01-19T09:53:17.060 回答
12

如果其父元素具有 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

于 2020-04-21T20:43:59.360 回答
11 
document.getElementById("id").scrollIntoView({block: "center"});
于 2020-03-22T02:36:57.500 回答
8

您可以分两步完成：

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);
于 2017-02-05T20:33:47.333 回答
3

使用 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>
于 2016-10-16T23:39:49.997 回答
2

@Rohan Orton改进垂直和水平滚动工作的答案。

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

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

除法后使用Bitwise operator右移获得 int 值。

console.log( 25 / 2 ); // 12.5
console.log( 25 >> 1 ); // 12
于 2017-12-04T12:49:14.077 回答
2

当滚动窗口/文档以外的容器时，此页面上的任何解决方案都不起作用。该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);
}
于 2018-08-28T07:06:31.867 回答
1

要支持所有浏览器的所有选项，scrollIntoViewOptions最好使用无缝滚动polyfill（https://www.npmjs.com/package/seamless-scroll-polyfill）

为我工作。

这是一个解释链接https://github.com/Financial-Times/polyfill-library/issues/657

于 2020-10-09T10:40:58.237 回答