Javascript scrollTo不是Internet Explorer 11中定义的方法(用于将元素滚动到视图中间) 我写了一个方法,它将容器滚动到其中的一个元素,但将元素保持在视图中间。看起来是这样的: // 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); }

Javascript scrollTo不是Internet Explorer 11中定义的方法(用于将元素滚动到视图中间) 我写了一个方法,它将容器滚动到其中的一个元素,但将元素保持在视图中间。看起来是这样的: // 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); },javascript,internet-explorer-11,Javascript,Internet Explorer 11,这适用于大多数浏览器,甚至一些旧的FF浏览器。但是,在Internet Explorer 11上,我在标题中得到一个错误,scrollTo()不是一个定义的函数。对于IE11,有什么可以替代此功能?谢谢您的回答。同意l-portet,因为我们可以设置属性和属性以实现相同的效果 此外,该问题还与以下代码有关: var scrollY = scrollTopOfElement - (window.innerHeight / 2); 我认为您希望获得基于目标元素和容器元素的滚动条,而不是窗口元素。因

这适用于大多数浏览器,甚至一些旧的FF浏览器。但是,在Internet Explorer 11上,我在标题中得到一个错误,
scrollTo()
不是一个定义的函数。对于IE11,有什么可以替代此功能?谢谢您的回答。

同意l-portet,因为我们可以设置属性和属性以实现相同的效果

此外,该问题还与以下代码有关:

var scrollY = scrollTopOfElement - (window.innerHeight / 2);
我认为您希望获得基于目标元素和容器元素的滚动条,而不是窗口元素。因此,请尝试修改您的代码,如下所示:

    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动画和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>

$(函数(){
jQuery(文档)。在('单击','滚动'按钮'上,函数(e){
var el=$(“滚动测试”);
var elOffset=el.offset().top;
var elHeight=el.outerHeight();
var frameHeight=$(“#编辑器”).outerHeight();
var偏移;
如果(elHeight<框架高度){
偏移=elOffset-((帧高度/2)-(elHeight/2));
}
否则{
偏移量=elOffset;
}
jQuery(“#编辑器”).animate({
滚动顶:偏移量
}, 1000);
});
});
#编辑{
高度:100px;
溢出:自动;
}
#滚动试验{
背景颜色:灰色;
}
内容
内容
内容
内容
内容
内容
测试 内容
内容
内容
内容
内容
内容
内容
内容
纸卷
结果如下:

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

试试
container.scrollTop=scrollY不起作用。