javascript - 动态扩展文本区域时，将 View 保持在页面底部

Question

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

问题

问题是在元素到达窗口的最底部后，按钮消失了，但评论框正确展开。

问题

如何在页面中保留发布按钮的 View (在我的示例中是整个 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文章:

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

作为一个草稿功能，我们需要一些回退和更稳定的插件。我的推荐是 litera 的 jquery-scrollintoview .

例子

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