Javascript scrollIntoView() среднее выравнивание?

Question

Javascript .scrollIntoView(boolean) предоставить только два варианта выравнивания.

1. Топ
2. низ

Что делать, если я хочу прокрутить представление так, чтобы. Я хочу, чтобы конкретный элемент был где-то посередине страницы?

Answer 1

Использование 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 );

Answer 2

Попробуй это:

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

обратитесь сюда для получения дополнительной информации и опций: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 3

Можно использовать 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() Метод поддерживается во всех современных браузерах.

Answer 4

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

Answer 5

Прокрутка до середины элемента работает хорошо, если его родительский элемент имеет css: overflow: scroll;

Если это вертикальный список, вы можете использовать document.getElementById("id").scrollIntoView({block: "center"}); и он прокрутит выбранный элемент до вертикальной середины родительского элемента.

Благодарим Грегори Р. и Хакуну за их хорошие ответы.

Дальнейшее чтение:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 6

Вы можете сделать это в два этапа:

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

Answer 7

С 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>

Answer 8

Улучшение ответа @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

Answer 9

Ни одно из решений на этой странице не работает, если прокручивается контейнер, отличный от окна / документа. 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);
}

Answer 10

Для поддержки всех вариантов в scrollIntoViewOptionsдля всех браузеров лучше использовать seamless-scroll-polyfill ( https://www.npmjs.com/package/seamless-scroll-polyfill)

Работал у меня.

Вот ссылка с объяснением https://github.com/Financial-Times/polyfill-library/issues/657