Question

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

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

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

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）中打开小提琴，然后单击“运行”
选择（突出显示）小提琴底部的一些文字
点击“粗体”按钮
观察容器已自动滚动到顶部

如果您在任何其他浏览器（Safari，Firefox，Chrome）中执行相同的步骤，您会发现容器不会滚动。它只是保持在之前的滚动位置（这是正确的行为）。

有什么想法吗？

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

IE11 + =＆gt;聚焦子div会导致父级滚动到顶部

1 个答案: