El propósito de este artículo es crear una barra de desplazamiento receptiva en la estructura de una página HTML usando CSS.
En CSS, el cuadro de desplazamiento receptivo es una técnica de interacción que contiene texto, imágenes o cualquier otro elemento. Se pueden desplazar en direcciones preestablecidas, lo que permite a los usuarios desplazarse si el contenido es más grande para la caja. Los cuadros de desplazamiento se utilizan a menudo cuando no desea ocupar mucho espacio con su contenido. Al crear un cuadro de desplazamiento, proporciona más contenido para que quepa en un espacio más pequeño.
Enfoque: para crear un cuadro de desplazamiento receptivo, agregue una etiqueta <div> y luego proceda a crear el cuadro de desplazamiento. Todo lo que necesita hacer es elegir la altura y el ancho del cuadro de desplazamiento (asegúrese de que la altura de su cuadro sea lo suficientemente corta para que tenga un desbordamiento del texto, lo que permite que el cuadro se desplace hacia abajo. Agregar desbordamiento: automático para crear un efecto de desplazamiento.
Ahora que ha formateado el cuadro de texto, está listo para agregar contenido. Formatea el contenido del cuadro de texto, tal como lo harías en tu página HTML. Una vez que haya agregado todo el contenido, cierre su etiqueta <div>. Ha creado un cuadro de desplazamiento y su página se verá instantáneamente más sistemática.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 0px solid #ddd;
}
th,
td {
text-align: left;
padding: 8px;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.scroll {
display: block;
border: 0px solid red;
padding: 5px;
margin-top: 5px;
width: 100%;
height: 100px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scroll">
<p>
With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT
Roorkee alumnus started a dream,
GeeksforGeeks. Whether programming
excites you or you feel stifled,
wondering how to prepare for interview
questions or how to ace data structures
and algorithms, GeeksforGeeks is a
one-stop solution. With every tick of
time, we are adding arrows in our quiver.
From articles on various computer
science subjects to programming problems
for practice, from basic to premium courses,
from technologies to entrance examinations,
we have been building ample content with
superior quality.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por arelemegha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA