Javascript scrollIntoView() middle alignment?

小开

最佳答案

使用 window.scrollTo()。获取要移动到的元素的顶部，并减去窗口高度的一半。

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

小开

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

小开

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

小开

你可以分两步来做:

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

You can add the height of the element if you want to center it globaly, and not center its top :

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']");
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);
}

Using Bitwise operator right shift to get int value after dividing.

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

小开

试试这个:

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

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

小开

当滚动窗口/文档以外的容器时，这个页面上的所有解决方案都不起作用。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);
}

小开

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

小开

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

小开

为了在所有浏览器上支持 scrollIntoViewOptions中的所有选项，最好使用 无缝卷曲填充料(https://www.npmjs.com/package/seamless-scroll-polyfill)

对我有用。

Here is a link with explanation https://github.com/Financial-Times/polyfill-library/issues/657