Javascript .scrollIntoView(boolean)
は、2つの配置オプションのみを提供します。
そのようなビューをスクロールしたい場合はどうでしょう。ページの中央のどこかに特定の要素を持ち込みたいですか?
これには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 );
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()
メソッドは、すべての最新のブラウザーでサポートされています。
これを試して :
document.getElementById('myID').scrollIntoView({
behavior: 'auto',
block: 'center',
inline: 'center'
});
詳細とオプションについては、こちらを参照してください: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
次の2つの手順で実行できます。
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);
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>
ウィンドウ/ドキュメント以外のコンテナがスクロールされると、このページのソリューションはどれも機能しません。 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);
}
@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