如何在 Internet Explorer 11 中保持垂直居中的同时滚动到某个元素？

Question

假设我在父容器中有一个元素。我想滚动到那个元素，同时保持它在父容器中垂直居中。我编写了以下适用于除 IE11 之外的所有浏览器的函数：

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

不幸的是，这在 IE11 上不起作用，因为 scrollTo() 不是定义的函数或其他任何东西。什么是替代方法？有没有办法在 IE11 中做到这一点？

Answer 1

因为the scrollTo method doesn't support IE browser, we could set the Element.scrollLeft property and Element.scrollTop属性实现了同样的效果。

请参考以下示例代码：

<script>
    function scrollWin() {
        var con = document.getElementById("container");
        var el = document.getElementById("goose");
        scrollIntoViewMiddle(el, con);
    }

    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;
    }
</script>

Html 资源和 CSS 风格：

<style>
    .scrollContainer {
        overflow-y: auto;
        max-height: 100px;
        position: relative;
        border: 1px solid red;
        width: 120px;
    }

    .box {
        margin: 5px;
        background-color: yellow;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #goose {
        background-color: lime;
    }
</style>
<div id="container" class="scrollContainer">
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div id="goose" class="box">goose</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
    <div class="box">duck</div>
</div>
<button onclick="scrollWin()">Click me to scroll</button><br><br>

结果如下所示：

如何在 Internet Explorer 11 中保持垂直居中的同时滚动到某个元素？

How to scroll to an element while keeping it vertically centered in Internet Explorer 11?

javascript

internet-explorer

internet-explorer-11