¿Cómo establecer la barra de desplazamiento del área de texto en la parte inferior de forma predeterminada usando JavaScript/jQuery?

Dado un documento HTML que contiene el elemento <textarea> y la tarea es establecer la posición de la barra de desplazamiento en la parte inferior de <textarea> con la ayuda de jQuery.

Enfoque 1:

  • Obtenga la propiedad scrollHeight del área de texto.
  • Use la propiedad scrollTop para establecer la posición de la barra de desplazamiento vertical usando jQuery.

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript | Set textarea scroll
        bar to bottom as a default.
    </title>
      
    <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
      
    <style>
        #t {
            height: 100px;
            width: 300px;
            background: green;
            color: white;
            text-align:justify;
        }
    </style>
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <textarea id = "t">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well 
        explained computer science and
        programming articles, quizzes etc. 
        It also contains the practice section
        which is helpful for practicing the
        data structure and algorithms
        questions. GeeksforGeeks provides
        placement course, DSA class, Machine
        learning class and other online and
        offline courses which will help in
        placement and also growing the
        knowledge.
    </textarea>
      
    <br>
      
    <button onclick = "gfg_Run()"> 
        click here
    </button>
      
    <p id = "GFG_DOWN" style = "color:green;
        font-size: 20px; font-weight: bold;">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = "Click on the button to set "
                + "the scroll bar to bottom";
          
        function gfg_Run() {
            $(document).ready(function(){
                var $text = $('#t');
                $text.scrollTop($text[0].scrollHeight);
            });
              
            el_down.innerHTML = 
                "Scroll bar is moved to bottom.";
        }         
    </script> 
</body> 
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Enfoque 2:

  • Este ejemplo está haciendo el mismo trabajo con JavaScript.
  • Obtenga la propiedad scrollHeight del área de texto.
  • Use la propiedad scrollTop para establecer la posición de la barra de desplazamiento vertical.

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript | Set textarea scroll bar to bottom as a default.
    </title>
      
    <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
      
    <style>
        #t {
            height: 100px;
            width: 300px;
            background: green;
            color: white;
            text-align:justify;
        }
    </style>
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <textarea id = "t">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well 
        explained computer science and
        programming articles, quizzes etc. 
        It also contains the practice section
        which is helpful for practicing the
        data structure and algorithms
        questions. GeeksforGeeks provides
        placement course, DSA class, Machine
        learning class and other online and
        offline courses which will help in
        placement and also growing the
        knowledge.
    </textarea>
      
    <br>
      
    <button onclick = "gfg_Run()"> 
        click here
    </button>
      
    <p id = "GFG_DOWN" style = "color:green;
        font-size: 20px; font-weight: bold;">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = "Click on the button to set"
                + "the scroll bar to bottom";
          
        function gfg_Run() {
            var text = document.getElementById('t');
            text.scrollTop = text.scrollHeight;
            el_down.innerHTML = "Scroll bar is moved to bottom.";
        }         
    </script> 
</body> 
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *