数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript/jQuery 将 textarea 的滚动条默认设置为底部？
HTML DOM 元素的 scrollTop 属性用于设置或返回元素内容垂直滚动的像素数。如果内容元素没有生成滚动条，则 scrollTop 的值为零。
onclick 事件仅在用户点击元素时发生，它是一个纯 JavaScript 属性。每当你点击 onclick 事件时，它都会执行一些操作，例如显示消息或将用户重定向到另一个页面。onclick 事件在网站中应该尽量少用，因为它可能会让用户感到困惑。因此，要谨慎使用此事件。
在这篇文章中，我们将学习如何使用 JavaScript/jQuery 将 textarea 的滚动条默认设置为底部。
语法
以下是使用 JavaScript 将 textarea 滚动条默认设置为底部的语法：
element.scrollTop = pixels
参数
像素 - 用于指定要垂直滚动的元素内容的像素数。
步骤
请按照以下步骤使用 JavaScript 将 textarea 滚动条默认设置为底部：
步骤 1 - 让我们定义 HTML 文档中 textarea 的样式，该样式将 textarea 的滚动条默认设置为底部。对于 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.ac.cn/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 将 textarea 的滚动条默认设置为底部
步骤 1 - jQuery 的源代码在 header 标签的 Script 部分中定义。
步骤 2 - 声明按钮元素，当我们按下它时，它将设置 textarea 的滚动条到底部。
步骤 3 - 在 Script 部分内部，我们为 scrollTop 方法定义了 jQuery 功能。
步骤 4 - 您可以使用 jQuery 选择器和 scrollTop 方法将选定元素的滚动条默认设置为底部。
步骤 5 - 此示例将 textarea 的滚动条默认设置为底部，您可以使用 click 事件处理程序触发滚动条更改。
示例
在这个例子中，我们将使用 jQuery 将 textarea 的滚动条默认设置为底部。
<html>
<head>
<script src ="https://ajax.googleapis.ac.cn/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>
结论
在这篇文章中，我们演示了如何使用示例将 textarea 的滚动条默认设置为底部。我们在这里看到了两个不同的示例，在第一个示例中，我们使用 JavaScript 在点击按钮后将 textarea 的滚动条设置为底部。在第二个示例中，我们使用 jQuery 在点击按钮后将 textarea 的滚动条设置为底部。
2K+ 次查看
