IE11 + =>聚焦子div導致父母滾動到頂部

我遇到了Internet Explorer 11 +中的一個小問題。我有一個可滾動的容器div（帶有「overflow-y：auto」）和一個「contenteditable = true」的子div。IE11 + =>聚焦子div導致父母滾動到頂部

我遇到的問題是，每當我嘗試以編程方式專注於子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邊緣）的小提琴，然後單擊「運行」
選擇（突出顯示）小提琴底部的一些文字
單擊「粗體」按鈕
觀察該容器已經自動滾動到頂部

如果你去通過在任何其他瀏覽器（Safari瀏覽器，火狐，Chrome）相同的步驟，你會發現，容器不滾動。它只停留在與之前相同的滾動位置（這是正確的行爲）。

任何想法？

來源

2016-12-01 John Grese

僅供參考，在MS Edge上也會出現問題。 –

@Michael_B - 謝謝:)你碰巧找到解決方法嗎？ –

@Michael_B - 我剛剛更新了包括邊緣的帖子..謝謝！ –

我找到了解決方法。我可以使用「.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 
    } 
});

來源

2016-12-02 02:38:14

IE11 + =>聚焦子div導致父母滾動到頂部

回答

相關問題