JavaScript 如何将textarea滚动条设置为默认底部

HTML DOM元素的scrollTop属性用于设置或返回垂直滚动的元素内容的像素数。假设如果滚动条不是由内容元素产生的，那么scrollTop的值就是零。

onclick事件只在用户点击元素时发生，它是一个纯粹的JavaScript属性。每当你点击onclick事件时，它就会做一些动作，如显示一条信息或将用户重定向到另一个页面。在网站中必须减少对onclick事件的使用，因为它可能会给用户造成混乱。所以，要非常明智地使用这些事件。

在这篇文章中，我们将学习如何使用JavaScript/jQuery将textarea滚动条设置为默认的底部。

语法

以下是使用JavaScript设置文本区域滚动条到底部的默认语法

element.scrollTop = pixels

参数

Pixels - 用于指定要垂直滚动的元素内容的像素数。

操作步骤

按照下面给出的步骤，在JavaScript中把文本区域的滚动条设置为默认的底部。

第1步 - 让我们为HTML文档的文本区定义样式，将文本区的滚动条默认设置为底部。对于一个textarea元素，我们定义了高度、宽度、背景颜色、颜色和文本对齐方式。

第2步 - 在正文部分，我们定义了标题、按钮和脚本元素。

第3步 - 对于按钮元素，我们定义了scrollBar()方法。使用这个方法可以将文本区的滚动条设置为底部。

第4步 --在scrollBar()方法中，明确提到了应该执行哪个方法功能的id。

第5步 - scrollTop属性是HTML DOM属性，用于设置文本区的滚动条。

第6步 - 点击按钮后，onClick事件函数被触发，它将滚动条设置为底部。

例子

在这个例子中，我们要用JavaScript将文本区的滚动条设置为默认的底部。

<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将textarea的滚动条设置为默认的底部。

第1步 - jQuery的来源被定义在标题标签的脚本部分。

第2步 - 声明按钮元素，当我们按下它时，它将会把textarea的滚动条设置为底部。

第3步 - 在脚本部分，我们为scrollTop方法定义了jQuery的功能。

第4步 - 你可以通过使用jQuery选择器和scrollTop方法，将滚动条设置为默认的底部元素。

第5步 - 这个例子将把textarea的滚动条设置为默认的底部，你可以通过使用点击事件处理器来触发滚动条的变化。

例子

在这个例子中，我们将使用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>