如何使用 JavaScript/jQuery 将文本区域滚动条默认设置为底部?
HTML DOM 元素的 scrollTop 属性用于设置或返回垂直滚动的元素内容的像素数。假设滚动条不是由内容元素生成的，则 scrollTop 的值为零。
onclick 事件仅在用户单击元素时发生，并且它是一个纯 JavaScript 属性。每当您单击 onclick 事件时，它都会执行一些操作，例如显示消息或将用户重定向到另一个页面。网站中必须很少使用 onclick 事件，因为它可能会让用户感到困惑。因此，请明智地使用这些事件。
在本文中，我们将学习如何使用 JavaScript/jQuery 将文本区域滚动条默认设置为底部。
语法
以下是使用 JavaScript 将文本区域滚动条默认设置为底部的语法 -
element.scrollTop = pixels
参数
像素 - 用于指定要垂直滚动的元素内容的像素数。
步骤
按照以下步骤在 JavaScript 中将文本区域滚动条默认设置为底部 -
步骤 1 - 让我们定义 HTML 文档的文本区域的样式，该样式将默认将文本区域滚动条设置为底部。对于 textarea 元素，我们定义了高度、宽度、背景颜色、颜色和文本对齐。
步骤 2 − 在 body 部分下，我们定义了标题、按钮和脚本元素。
步骤 3 − 对于按钮元素，定义了 scrollBar() 方法。使用此方法位置将设置 textarea 滚动条到底部。
步骤 4 - 在 scrollBar() 方法中，明确提到了应执行哪个方法功能的 id。
步骤 5 - scrollTop 属性是 HTML DOM 属性，用于将滚动条设置为 textarea。
步骤 6 - 单击按钮后，触发 onClick 事件函数，并将滚动条设置为底部。
示例
在此示例中，我们将借助 JavaScript 将 textarea 滚动条默认设置为底部。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#textarea {
height: 100px;
width: 650px;
text-align:justify;
}
</style>
</head>
<body>
<h2>Setting textarea scroll bar to bottom as a default using JavaScript</h2>
<textarea id = "textarea">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</textarea>
<br><br>
<button onclick = "scrollBar()">
Press here
</button>
<script>
//function to set textarea scroll bar to bottom as a default using JavaScript
function scrollBar() {
var content = document.getElementById('textarea');
content.scrollTop = content.scrollHeight;
}
</script>
</body>
</html>
使用 jQuery 更改背景颜色
请按照以下步骤使用 jQuery 将文本区域滚动条默认设置为底部:
步骤 1 - jQuery 的来源在标题标签的脚本部分下定义。
步骤 2 - 声明按钮元素，按下按钮时将文本区域滚动条设置为底部。
步骤 3 - 在脚本部分中，我们为 scrollTop 方法定义了 jQuery 功能。
步骤 4 - 您可以使用 jQuery 选择器和 scrollTop 方法将所选元素的滚动条默认设置为底部。
步骤 5 - 该示例将文本区域滚动条默认设置为底部，您可以使用点击事件触发滚动条更改处理程序。
示例
在此示例中，我们将使用 jQuery 将文本区域滚动条默认设置为底部。
<html>
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#contentarea {
height: 100px;
width: 350px;
background: yellow;
color: blue;
text-align:justify;
}
</style>
</head>
<body>
<h2>Setting textarea scroll bar to bottom as a default using jquery</h2>
<textarea id = "contentarea">Tutorials Point through its collection of more than a thousand user-friendly tutorials, helping millions of students and professionals worldwide to master new technologies and grow in their career. After a successful journey of providing the best self-learning content at tutorialspoint.com, we created our subscription-based premium product called Tutorix to provide Simplified Learning through High Quality Visuals in the best personalized way for K-12 students, and aspirants of competitive exams like IIT/JEE and NEET.</textarea>
<br><br>
<button onclick = "contentscrollBar()">
Click here to Scroll
</button>
<script>
//function to set textarea scroll bar to bottom as a default using jQuery
function contentscrollBar() {
$(document).ready(function(){
var $content1 = $('#contentarea');
$content1.scrollTop($content1[0].scrollHeight);
});
}
</script>
</body>
</html>
结论
在本文中，我们演示了如何将文本区域滚动条默认设置为底部，并提供了示例。我们在这里看到了两个不同的示例，在第一个示例中，我们使用 JavaScript 在单击按钮后将文本区域滚动条设置为底部。在第二个示例中，我们使用 jQuery 在单击按钮后将文本区域的滚动条设置为底部。
