División desplazable de JavaScript
-
Use la propiedad
overflowpara desplazar un elementodiven JavaScript -
Use las propiedades
overflowXyoverflowYpara desplazar un elementodiven JavaScript
En JavaScript, podemos manipular ciertos eventos que mejoran la interfaz. A menudo, el rendimiento de algunas propiedades CSS puede explicarse mediante la implementación de JavaScript.
Al igual que overflow-x en CSS puede hacer la misma tarea en JavaScript que overflowX.
Nuestra tarea es hacer que un elemento div sea desplazable. No nos centraremos en el alto/ancho de compensación o el ancho de altura básico del contenido; más bien, estableceremos un div con un tamaño estático.
Pero el contenido puede ser de longitud variable. Veremos dos ejemplos que cubrirán el uso de overflow y overflowX and overflowY.
Revisemos los códigos.
Use la propiedad overflow para desplazar un elemento div en JavaScript
La propiedad overflow para el valor auto creará automáticamente una barra de desplazamiento vertical si el contenido es más grande que el tamaño div. Esta propiedad resolverá el caso de hacer un elemento div desplazable.
En las siguientes líneas de código, se presenta una demostración.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<style>
div{
background: powderblue;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflow = 'auto';
</script>
</body>
</html>
Producción:
Use las propiedades overflowX y overflowY para desplazar un elemento div en JavaScript
Establecemos la barra de desplazamiento del x-axis en none de acuerdo con estos conjuntos de propiedades. Y así, la barra de desplazamiento vertical se establece con el valor de overflowY a auto.
En consecuencia, cuando el contenido adquiere un tamaño mayor que el div, aparece la barra de desplazamiento y funciona. La valla de código ofrece una mejor vista previa.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
background: lavender;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflowX='none';
document.getElementById('scroll').style.overflowY='auto';
</script>
</body>
</html>
Producción:
