将窗口滚动到ContentEditable块的当前行

试用 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

const el = document.querySelector('[contenteditable]')
el.addEventListener('keyup', ({target: {lastChild}}) => lastChild.scrollIntoView())

https://codepen.io/wintercounter/pen/pZjeLW

ContentEditable正在创建 div 每次换行都是S。我们只是滚动到整个可编辑区域的最后一个子区域。

也许用 style="overflow: scroll"; 在 <div contenteditable>Start typing ...</div>

<div contenteditable style="overflow: scroll";>Start typing ...</div>

<div class="sticky-footer">
  <button>Submit</button>
</div>

我在这里修改了你的代码。

Click Here To See

<div contenteditable class="editableContent">Start typing ...</div>

<div class="sticky-footer">
  <button>Submit</button>
</div>


.sticky-footer {
 position:sticky;
 bottom:0;
 padding:20px 0;
 background:#eee
 }

 .editableContent{

  min-height: 30px;
  overflow: auto;
  max-height: 50px;
  }

使用 overflow: auto 通过设置 max-height 通过计算视图端口高度减去粘性页脚的高度,可编辑内容容器的。请检查下面的工作示例:

.sticky-footer {
  position:sticky;
  bottom:0;
  padding:20px 0;
  background:#eee
}
.content-editable{
  min-height: 30px;
  overflow: auto;
  max-height: calc(100vh - 65px);
}

<div contenteditable class="content-editable">Start typing ...</div>
<div class="sticky-footer">
  <button>Submit</button>
</div>

您只需在笔中添加以下代码:

div[contenteditable]{
  height:calc(100vh - 70px);
  overflow-y:scroll;
}
body{
  overflow:hidden;
}

下面是代码的工作示例:

.sticky-footer {
  position:sticky;
  bottom:0;
  padding:20px 0;
  background:#eee
}
div[contenteditable]{
  height:calc(100vh - 70px);
  overflow-y:scroll;
}
body{
  overflow:hidden;
}

 <div contenteditable>Start typing ...</div>
<div class="sticky-footer">
  <button>Submit</button>
</div> 

希望这有帮助。