当textarea动态扩展时，在页面底部保持视图

Question

我使用textarea作为评论框。我有一个button元素。用户可以在textarea中写下他的文本，当文本到达元素的底部时，我会使用一个小的javascript函数来自动扩展textarea的高度。

问题

问题是元素点击窗口的最底部后，按钮消失了，但注释框正确展开。

问题

如何在页面中保留post按钮的视图（在我的示例中为整个comment-post-area类）而不会丢失它？

以下提供的代码和示例

function textAreaAdjust(o) {
  o.rows = (o.value.split('\n').length);
}

.comment-editor textarea {
  border: 1px solid black;
  min-width: 100% !important;
  padding: 10px 10px 10px 20px;
  font-size: 14px;
  letter-spacing: 2px;
  resize: none;
  outline: none;
  overflow: hidden;
}
.comment-post-area .footer button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid RGBA(0, 0, 0, 0.2);
}

<div class="comment-post-area">
  <form class="comment-post-form">
    <div class="comment-editor">
      <textarea placeholder="Leave a comment." onkeyup="textAreaAdjust(this);" rows="1"></textarea>
    </div>
    <div class="footer">
      <button type="submit">
        <span class="submit-text">Post</span>
      </button>
    </div>
  </form>
</div>

JSFIDDLE Example <!-- Same as above -->

Answer 1

实际上相关的问题给了我答案。

来自@mavili's answer

  

document.getElementById('divID').scrollIntoView();

所以我的代码将成为：

function textAreaAdjust(o) {
  o.rows = (o.value.split('\n').length);
  
  // the bellow line was added to reflect my example
  document.getElementById('submit-section').scrollIntoView();
  // end of added code
}

.comment-editor textarea {
  border: 1px solid black;
  min-width: 100% !important;
  padding: 10px 10px 10px 20px;
  font-size: 14px;
  letter-spacing: 2px;
  resize: none;
  outline: none;
  overflow: hidden;
}
.comment-post-area .footer button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid RGBA(0, 0, 0, 0.2);
}

<div class="comment-post-area">
  <form class="comment-post-form">
    <div class="comment-editor">
      <textarea placeholder="Leave a comment." onkeyup="textAreaAdjust(this);" rows="1"></textarea>
    </div>
    <div class="footer" id="submit-section">
      <button type="submit">
        <span class="submit-text">Post</span>
      </button>
    </div>
  </form>
</div>

更新

来自Element.scrollIntoView() MDN文章：

  

这是一项实验性技术
  因为这项技术的   规范尚未稳定，请检查兼容性表   用于各种浏览器。还要注意语法和行为   实验技术可能会在未来的版本中发生变化   浏览器随着规范的变化而变化。

作为草稿功能，我们需要一些后备和更稳定的插件。我的建议是文学作品jquery-scrollintoview。

实施例

$('#submit-section').scrollintoview({
    duration: 0
});