js实现textarea滚动条位置始终在最下方

最新推荐文章于 2024-07-15 03:00:38 发布

wunianisme

最新推荐文章于 2024-07-15 03:00:38 发布

阅读量4k

点赞数

分类专栏：前端文章标签： js textarea scrollHeight scrollTop

本文链接：https://blog.csdn.net/qq_29645505/article/details/100088349

版权

前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

在默认情况下，随着文本内容的不断增加，textarea的滚动条也会不断往上方移动，这就会导致当内容超出文本可视区域后，我们无法看到最下方的内容。这个时候，我们可能就会想让textarea滚动条的位置始终在最下方，因为只有滚动条在最下方时，textarea底部区域的文本才会显现出来。
想要实现这个功能也很简单，只要几行js代码就可以搞定了，这里以jQuery为例来实现此功能。

<script type="text/javascript">
  $(document).ready(function(){
    var height=$("#textarea")[0].scrollHeight;
    $("#textarea").scrollTop(height);
  })
</script>

<textarea id="textarea" name="textarea"  />

需要注意的是，在获取scrollHeight属性值时，textarea选择器必须加上数组下标索引为0，不管在该页面上是否存在多个相同的选择器，否则在浏览器控制台将会报错。