IE11 + =>聚焦子div使父母滚动到顶部 [英] IE11+ => Focusing child div causes parent to scroll to top

问题描述

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

运行到每当我尝试以编程方式专注于子div（使用element.focus（））时，Internet Explorer自动滚动到父div的顶部。我一直在试图找到一个解决方案，以防止自动滚动到顶部，但一直没有找到一个。

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

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

HTML： >

 < div id =container> 
< div id =editorcontenteditable =true> 
 <！ - 示例文本/ html在这里 - > 
< / div> 
< / div> 
< button id =bold>粗体< / button> 
  

CSS：

  #container {
 height：250px; 
 overflow-y：auto; 
 border：1px纯黑色; 
} 
 #editor {
 padding：10px; 
 
  

JS：

  var container = document.getElementById（'container'）; 
 var editor = document.getElementById（'editor'）; 
 var bold = document.getElementById（'bold'）; 
 
 //最初，滚动到底部... 
 container.scrollTop = 200; 
 
 bold.addEventListener（'click'，function（e）{
 e.preventDefault（）; 
 document.execCommand（'bold'）; 
 
 //将焦点带回编辑器... 
 //这导致IE滚动到容器的顶部:( 
 editor.focus（）; 
}）; 
  

重现问题的步骤：

1. 打开IE11（或IE Edge）中的小提琴，然后点击运行。
   
2. 选择（高亮显示）
   
3. 点击粗体按钮


4. 观察容器已经自动滚动到顶部

如果您在其他浏览器（Safari，Firefox，Chrome）中执行相同的步骤，您会注意到容器不滚动，只是保持不变滚动的位置，这是以前（这是正确的行为）。

任何想法？

解决方

我已经发现一种解决方法。我可以使用.setActive（仅在IE / Edge中可用），而不是使用.focus来集中编辑器。 setActive方法不会导致滚动，但仍然关注元素。我只是对setActive函数进行功能检测，以确定我们是否在IE / Edge中。

这里是setActive方法：

https://msdn.microsoft.com/zh-cn/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'）; 
 
 //最初，滚动到底部... 
 container.scrollTop = 200; 
 
 bold.addEventListener（'click'，function（e）{
 e.preventDefault（）; 
 document.execCommand（'bold'）; 
 
 //将焦点带回编辑器... 
 //在IE / Edge中使用'setActive'，以便容器不滚动... 
 if（editor.setActive）{
 （）; //所有其​​他浏览器
} 
}）; / / IE / Edge 
} else {
 editor.focus 
  

I am running into a little problem in Internet Explorer 11+. I have a scrollable container div (with "overflow-y:auto"), and a child div that is "contenteditable=true".

The problem that I'm running into is that whenever I try to programmatically focus on the child div (using element.focus()), Internet Explorer is automatically scrolling to the top of the parent div. I've been trying to find a workaround for IE to keep it from automatically scrolling to top, but have been unable to find one yet.

Here is a fiddle that illustrates the problem:

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

Steps to reproduce the problem:

1. Open the fiddle in IE11 (or IE Edge), and click "Run"
2. Select (highlight) some text at the bottom of the fiddle
3. Click the "bold" button
4. Observe that the container has automatically scrolled to the top

If you go through the same steps in any other browser (Safari, Firefox, Chrome), you'll notice that the container does not scroll. It just stays at the same scroll position that it was before (which is the correct behavior).

Any ideas?

解决方案

I have found a workaround. Instead of using ".focus" to focus the editor, I can use ".setActive" (which is only available in IE/Edge). The "setActive" method does not cause scrolling, but still "focuses" the element. I'm just doing feature-detection on the "setActive" function to determine whether or not we are in IE/Edge.

Here is the documentation for the "setActive" method:

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

Here is a fiddle illustrating the solution:

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

The JS solution:

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 + =>聚焦子div使父母滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！