Código de JavaScript - Mover el scroll para bajar y subir

Pos: 3

Val: 2.288

Ha mantenido su posición en JavaScript (en relación al último mes)

Mover el scroll para bajar y subir

JavaScript

(2)

Publicado el 10 de Junio del 2021 por Katas (200 códigos)

23.961 visualizaciones desde el 10 de Junio del 2021

Este código muestra como mover el scroll de un elemento que tiene el estilo overflow-y:auto; asignado.

Para bajar el scroll, ponemos en la posición scrollTop del elemento el valor de scrollHeight.
Para subir el scroll, simplemente le ponemos la posición scrollTop a 0.

scroll

1
(2)

Publicado el 10 de Junio del 2021

gráfica de visualizaciones de la versión: 1

23.962 visualizaciones desde el 10 de Junio del 2021

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <style>

    .scroll {

        overflow-y:auto;

        border:1px solid #aaa;

        height: 60px;

        padding: 5px;

        margin-top:10px;

    </style>

</head>

<body>

    <input type="text" placeholder="Introduce un texto">

    <input type="button" value="enviar">

    <input type="button" value="ir al final" class="final">

    <input type="button" value="ir al inicio" class="inicio">

	<div class="scroll">

        <div>Primera linea</div>

        <div>Segunda linea</div>

        <div>Tercera linea</div>

        <div>Cuarte linea</div>

    </div>

</body>

</html>

<script>

const scroll=document.querySelector(".scroll");

document.querySelector("input[type=button]").addEventListener("click", () => {

    const div=document.createElement("div");

    div.innerText=document.querySelector("input[type=text]").value;

    scroll.insertAdjacentElement("beforeend", div);

});

document.querySelector(".final").addEventListener("click", () => {

    scroll.scrollTop=scroll.scrollHeight;

});

document.querySelector(".inicio").addEventListener("click", () => {

    scroll.scrollTop=0;

});

</script>

Comentarios sobre la versión: 1 (2)

ScriptShow

23 de Julio del 2021

No ha dejado ningún comentario

Responder

dantemusical1

3 de Julio del 2022

me gusto mucho aunque quizas suba una version usando javascript

Responder

Comentar la versión: 1

http://lwp-l.com/s7089

Genera números primos hasta un número determinado

Codificar y decodificar a base64

Código de JavaScript - Mover el scroll para bajar y subir

1(2)

Comentarios sobre la versión: 1 (2)

Comentar la versión: 1

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

1
(2)