Javascript scrollIntoView () 중간 정렬?

Javascript scrollIntoView () 중간 정렬?

---

Javascript .scrollIntoView(boolean)는 두 가지 정렬 옵션 만 제공합니다.

1. 상단
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

---

두 단계로 수행 할 수 있습니다.

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>

---

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

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

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

---

None of the solutions on this page work when an container other than the window/document is scrolled. The getBoundingClientRect approach fails with absolute positioned elements.

In that case we need to determine the scrollable parent first and scroll it instead of the window. Here is a solution that works in all current browser versions and should even work with IE8 and friends. The trick is to scroll the element to the top of the container, so that we know exactly where it is, and then subtract half of the screen's height.

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

참고URL : https://stackoverflow.com/questions/8922107/javascript-scrollintoview-middle-alignment