Javascript 如何在Internet Explorer 11中滚动到一个元素，同时使其垂直居中？

假设我在父容器中有一个元素。我想滚动到该元素，同时使其在父容器中垂直居中。我编写了以下函数，该函数适用于除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中是否有这样做的方法

因为，我们可以设置属性和属性以实现相同的效果

请参考以下示例代码：

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

函数scrollWin（）{
var con=document.getElementById（“容器”）；
var el=document.getElementById（“goose”）；
滚动至视图中间（el、con）；
}
函数scrollIntoViewMiddle（元素、容器）{
如果（容器===未定义）{
容器=窗口；
}
var elementRect=element.getBoundingClientRect（）；
var absoluteElementTop=elementRect.top；
var middleDiff=（elementRect.height/2）；
var scrollTopOfElement=绝对元素顶部+中间差；
变量scrollY=（scrollTopOfElement-（container.getBoundingClientRect（）.height/2））；
//container.scrollTo（0，scrollY）；
container.scrollLeft=0；
container.scrollTop=scrollY；
}

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>

.滚动容器{
溢出y：自动；
最大高度：100px；
位置：相对位置；
边框：1px纯红；
宽度：120px；
}
.盒子{
保证金：5px；
背景颜色：黄色；
高度：25px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#鹅{
背景色：石灰；
}
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鹅
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
单击我滚动

结果如下所示：

因为，我们可以设置属性和属性以实现相同的效果

请参考以下示例代码：

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

函数scrollWin（）{
var con=document.getElementById（“容器”）；
var el=document.getElementById（“goose”）；
滚动至视图中间（el、con）；
}
函数scrollIntoViewMiddle（元素、容器）{
如果（容器===未定义）{
容器=窗口；
}
var elementRect=element.getBoundingClientRect（）；
var absoluteElementTop=elementRect.top；
var middleDiff=（elementRect.height/2）；
var scrollTopOfElement=绝对元素顶部+中间差；
变量scrollY=（scrollTopOfElement-（container.getBoundingClientRect（）.height/2））；
//container.scrollTo（0，scrollY）；
container.scrollLeft=0；
container.scrollTop=scrollY；
}

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>

.滚动容器{
溢出y：自动；
最大高度：100px；
位置：相对位置；
边框：1px纯红；
宽度：120px；
}
.盒子{
保证金：5px；
背景颜色：黄色；
高度：25px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#鹅{
背景色：石灰；
}
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鹅
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
鸭子
单击我滚动

结果如下所示：

---

使用

scrollTo

polyfill库，例如使用

scrollTo

polyfill库，例如。