IE11+ => 聚焦子 div 导致父级滚动到顶部答案

【问题标题】：IE11+ => Focusing child div causes parent to scroll to topIE11+ => 聚焦子 div 导致父级滚动到顶部
【发布时间】：2017-04-15 13:08:26
【问题描述】：

我在 Internet Explorer 11+ 中遇到了一个小问题。我有一个可滚动的容器 div（带有“overflow-y:auto”）和一个子 div，即“contenteditable=true”。

我遇到的问题是，每当我尝试以编程方式关注子 div（使用 element.focus()）时，Internet Explorer 会自动滚动到父 div 的顶部。我一直在尝试为 IE 找到一种解决方法，以防止它自动滚动到顶部，但还没有找到。

这是一个说明问题的小提琴：

http://jsfiddle.net/grese/dvxh74fr/9/

HTML：

    <div id="container">
         <div id="editor" contenteditable="true">
             <!-- sample text/html here -->
         </div>
    </div>
    <button id="bold">bold</button>

CSS：

    #container {
      height: 250px;
      overflow-y: auto;
      border: 1px solid black;
    }
    #editor {
      padding: 10px;
    }

JS：

    var container = document.getElementById('container');
    var editor = document.getElementById('editor');
    var bold = document.getElementById('bold');

    // initially, scroll to bottom...
    container.scrollTop = 200;

    bold.addEventListener('click', function(e) {
        e.preventDefault();
        document.execCommand('bold');

        // bring focus back to the editor...
        // this is causing IE to scroll to the top of the container :(
        editor.focus();
    });

重现问题的步骤：

在 IE11（或 IE Edge）中打开 fiddle，然后点击“运行”
选择（突出显示）小提琴底部的一些文本
点击“粗体”按钮
观察容器已经自动滚动到顶部

如果您在任何其他浏览器（Safari、Firefox、Chrome）中执行相同的步骤，您会注意到容器不会滚动。它只是停留在与之前相同的滚动位置（这是正确的行为）。

有什么想法吗？

【问题讨论】：

仅供参考，MS Edge 上也会出现问题。
@Michael_B - 谢谢 :) 你碰巧找到了解决方法吗？
@Michael_B - 我刚刚更新了帖子以包括 edge .. 谢谢！
另一种解决方案请参见stackoverflow.com/questions/35649934/…
MacOS Safari 11+ 中的同样问题。没有setActive，很遗憾。

标签： javascript css internet-explorer scroll focus

【解决方案1】：

我找到了解决方法。我可以使用“.setActive”（仅在 IE/Edge 中可用），而不是使用“.focus”来聚焦编辑器。 “setActive”方法不会导致滚动，但仍会“聚焦”元素。我只是在“setActive”函数上进行特征检测以确定我们是否在 IE/Edge 中。

这里是“setActive”方法的文档：

https://msdn.microsoft.com/en-us/library/ms536738(v=vs.85).aspx

这是一个说明解决方案的小提琴：

http://jsfiddle.net/grese/dvxh74fr/11/

JS 解决方案：

var container = document.getElementById('container');
var editor = document.getElementById('editor');
var bold = document.getElementById('bold');

// initially, scroll to bottom...
container.scrollTop = 200;

bold.addEventListener('click', function(e) {
    e.preventDefault();
    document.execCommand('bold');

    // bring focus back to the editor...
    // use 'setActive' in IE/Edge so container does not scroll...
    if (editor.setActive) {
        editor.setActive(); // IE/Edge
    } else {
        editor.focus(); // All other browsers
    }
});

【讨论】：