javascript - 滚动 "scrollable"div 时，CKeditor 内联编辑器保留在屏幕上

Question

我有一个“可滚动” div。在这个 div 中，我有一些文本和另一个带有 contenteditable=true 的 div。

HTML 源代码如下所示

<div id='scrollable' style="overflow:scroll;height:500px;width:90%;position:absolute">
some text
   <div id='editable' style="color:red" contenteditable=true>editable div</div>
some text
</div>

“可编辑”div 的内联 ckeditor 编辑器应该出现在页面加载时。这是通过聚焦 div 来完成的。

 $( document ).ready(function() {
  $("#editable").focus();
});

问题是，当我滚动“可滚动”div 时，内联编辑器仍保留在屏幕上。我希望当我滚动时它保持在“屏幕外”。我的意思是，我希望它的行为就像可滚动 div 中的常规元素一样。

我准备了一个jsfiddle但为了进行测试，我建议查看结果页面 separately 。在 FF 和 Chrome 中测试

Answer 1

你可以做类似的事情

$( document ).ready(function() {
  // Handler for .ready() called.
  $("#editable").focus();
     setInterval(function(){$("#cke_editable").css("top",($("#editable").offset().top - $("#cke_editable").height())+"px")})
});

看看它是否有效 here