如何使用 JavaScript/jQuery 将 textarea 滚动条设置为默认底部？

当我们需要将实时输入的文本展示在 textarea 中时，希望每次输入时能够将滚动条自动定位到 textarea 的底部位置。因此，本文将简单介绍如何使用 JavaScript/jQuery 将 textarea 的滚动条设置为默认底部。

原理分析

对于 textarea 来说，我们可以通过 scrollIntoView() 方法来将滚动条定位到底部，具体如下：

textarea.scrollIntoView(false);

其中，false 表示只考虑当前元素是否足够显示，而不会将父元素一起滚动，即只将当前元素滚动到可见区域的底部，而不会将整个页面滚动到底部。

那么如何在用户每次输入时都将滚动条定位到底部呢？我们可以绑定 input 事件，即每次用户输入时都触发一次事件，然后在事件处理函数中使用 scrollIntoView() 方法将滚动条定位到底部，即可实现自动定位滚动条。

使用 jQuery 实现

以下是使用 jQuery 实现将 textarea 滚动条定位到底部的代码：

$(function() {
  var textarea = $('textarea');
  textarea.on('input', function() {
    textarea[0].scrollTop = textarea[0].scrollHeight;
  });
});

其中，$('textarea') 表示选取所有的 textarea 元素，然后绑定 input 事件处理函数，在处理函数中将滚动条的 scrollTop 设置为滚动条的 scrollHeight，即可将滚动条自动定位到底部。注意，这里需要使用 textarea[0] 来获取 textarea 元素的原生 DOM 对象，否则 jQuery 将在每次操作时都尝试封装一次 DOM 对象，导致性能下降。

使用原生 JavaScript 实现

以下是使用原生 JavaScript 实现将 textarea 滚动条定位到底部的代码：

window.addEventListener('load', function() {
  var textarea = document.getElementsByTagName('textarea')[0];
  textarea.addEventListener('input', function() {
    textarea.scrollTop = textarea.scrollHeight;
  });
});

其中，document.getElementsByTagName('textarea')[0] 表示选取页面中的第一个 textarea 元素，然后绑定 input 事件处理函数，在处理函数中将滚动条的 scrollTop 设置为滚动条的 scrollHeight，即可将滚动条自动定位到底部。

总结

本文介绍了如何使用 JavaScript/jQuery 将 textarea 滚动条设置为默认底部，原理比较简单，只需要在 textarea 绑定 input 事件，在处理函数中使用 scrollIntoView() 方法或者直接设置 scrollTop 来将滚动条自动定位到底部即可。如果你有更好的实现方式，欢迎在评论区留言交流！