scrollTo - это не метод, определенный в Inte rnet Explorer 11 (для прокрутки элемента в середину представления)

Question

Я написал метод, который прокручивает контейнер до элемента внутри него, но сохраняет элемент в середине представления. Это выглядит так:

// Function for scrolling to an element, and placing it in the middle of the view
// By default, the container parameter is set to the browser window
function scrollIntoViewMiddle(element, container) {
    if (container === undefined) {
        container = window;
    }
    var elementRect = element.getBoundingClientRect();
    var absoluteElementTop = elementRect.top;
    var middleDiff = (elementRect.height / 2);
    var scrollTopOfElement = absoluteElementTop + middleDiff;
    var scrollY = scrollTopOfElement - (window.innerHeight / 2);
    container.scrollTo(0, scrollY);
}

Это работает в большинстве браузеров, даже в некоторых старых FF. Однако в Inte rnet Explorer 11 я получаю сообщение об ошибке в заголовке, что scrollTo() не является определенной функцией. Что может быть альтернативой этой функции для IE11? Спасибо за любые ответы.

Answer 1

Согласен с l-portet, поскольку метод scrollTo не поддерживает IE browser , мы можем установить свойство Element.scrollLeft и Element.scrollTop свойство для достижения того же эффекта.

Кроме того, проблема также связана со следующим кодом:

var scrollY = scrollTopOfElement - (window.innerHeight / 2);

Я думаю, что вы хотите получить scrollY на основе целевого элемента и элемент контейнера, а не элемент окна. Поэтому, пожалуйста, попробуйте изменить ваш код, как показано ниже:

    function scrollIntoViewMiddle(element, container) {
        if (container === undefined) {
            container = window;
        }
        var elementRect = element.getBoundingClientRect();
        var absoluteElementTop = elementRect.top;
        var middleDiff = (elementRect.height / 2);
        var scrollTopOfElement = absoluteElementTop + middleDiff;
        var scrollY = (scrollTopOfElement - (container.getBoundingClientRect().height / 2));
        //container.scrollTo(0, scrollY);
        container.scrollLeft = 0;
        container.scrollTop = scrollY;
    }

Более подробно пример кода, пожалуйста, проверьте этот образец .

Кроме того, вот еще один обходной путь, это использует JQuery animate и scrollto, вы можете сослаться на него.

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        jQuery(document).on('click', '#scroll_button', function (e) {

            var el = $("#scroll_test");
            var elOffset = el.offset().top;
            var elHeight = el.outerHeight();
            var frameHeight = $("#editor").outerHeight();
            var offset;

            if (elHeight < frameHeight) {
                offset = elOffset - ((frameHeight / 2) - (elHeight / 2));
            }
            else {
                offset = elOffset;
            }


            jQuery('#editor').animate({
                scrollTop: offset
            }, 1000);
        });

    });
</script>
<style>
    #editor {
        height: 100px;
        overflow: auto;
    }

    #scroll_test {
        background-color: grey;
    }
</style>
<div id="editor" placeholder="Enter text ..." contenteditable="true" autofocus>
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <div id="scroll_test">
        test
    </div>
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
    <span>content</span><br />
</div>
<button id="scroll_button">
    Scroll
</button>

Результат выглядит следующим образом: