Question

我有一个非常简单的带有页脚粘滞的表格

<div contenteditable>Start typing ...</div>

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

https://codepen.io/anon/pen/vaNgQV

当文本到达页脚时，它就会在其下方

所以我正在寻找一种简单的解决方案，如果键入时某些内容重叠，则会自动滚动窗口

编辑

我想contenteditable div有自己的滚动条不是问题，但是全局滚动条有解决方案吗？

Answer 1

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

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

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

Answer 2

我在这里对您的代码进行了一些更改。

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

Answer 3

尝试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。我们只是滚动到整个可编辑区域的最后一个子项。

Answer 4

通过计算视口高度减去粘性页脚的高度来设置可编辑内容容器的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>

Answer 5

您需要做的就是在笔中添加以下代码：

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>

希望这会有所帮助。

滚动窗口到内容可编辑块的当前行

5 个答案: