博客

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

  • Post category:jquery

要将textarea滚动条设置为默认底部，可以使用JavaScript或jQuery。以下是两种实现方法：

1.使用JavaScript

使用JavaScript实现时需要先获取textarea元素，然后通过 scrollTop 和 scrollHeight 属性来设置滚动位置：

var textarea = document.getElementById("my-textarea");
textarea.scrollTop = textarea.scrollHeight;

这段代码会将滑动条自动滚动到最底部，确保文本从底部开始显示。

下面是一个使用JavaScript实现的示例：

<!DOCTYPE html>
<html>
<head>
    <title>设置textarea滑动条默认值为底部</title>
</head>
<body>
    <h2>在textarea中添加内容以看到效果：</h2>
    <textarea id="my-textarea"></textarea>
    <script>
        var textarea = document.getElementById("my-textarea");
        textarea.value = "开始滚动到最底部\n";

        // 3秒后添加新内容，并将滑动条滚动到最底部
        setTimeout(function() {
            textarea.value += "继续滚动到最底部\n";
            textarea.scrollTop = textarea.scrollHeight;
        }, 3000);
    </script>
</body>
</html>

2.使用jQuery

jQuery可以简化JavaScript代码，使用jQuery实现时，可以使用 scrollTop() 方法和 prop() 方法直接设置textarea滚动位置：

$("#my-textarea").scrollTop($("#my-textarea")[0].scrollHeight);

下面是一个使用jQuery实现的示例：

<!DOCTYPE html>
<html>
<head>
    <title>使用jQuery设置textarea滑动条默认值为底部</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <h2>在textarea中添加内容以看到效果：</h2>
    <textarea id="my-textarea"></textarea>

    <script>
        var textarea = $("#my-textarea");
        textarea.val("开始滚动到最底部\n");

        // 3秒后添加新内容，并将滑动条滚动到最底部
        setTimeout(function() {
            textarea.val(textarea.val() + "继续滚动到最底部\n");
            textarea.scrollTop(textarea.prop("scrollHeight"));
        }, 3000);
    </script>
</body>
</html>

以上就是使用JavaScript或jQuery设置textarea滑动条默认值为底部的完整攻略。

Tags: