Cómo hacer que un div se pueda desplazar verticalmente (2023)

CSSnos permite hacer un

desplazable verticalmente. Se puede hacer fácilmente usando elDesbordamientopropiedad. ElDesbordamientopropiedad tiene diferentes valores. P.ej.,Desbordamiento:auto; y un procedimiento de ocultación de ejes comodesbordamiento-x:oculto; ydesbordamiento-y:auto; hará que una barra se pueda desplazar vertical y horizontalmente, y el valor "automático" agregará solo una barra que se pueda desplazar verticalmente.

Para una barra desplazable, use los ejes x e y. Selecciona eldesbordamiento-x:oculto; ydesbordamiento-y:auto; para ocultar automáticamente la barra de desplazamiento horizontal y mostrar una barra de desplazamiento vertical.

Veamos un ejemplo, donde

se puede desplazar verticalmente.
  • Colocar el

    etiqueta. Escriba algún contenido en él.
  • Crea un
    con la clase "scroll".
    <cuerpo> <h2>W3docsh2> <divisiónclass="scroll"> Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición tipográfica. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde la1500cuandoan impresora desconocida tomóagalera de tipo y lo codificadoahaceratipo libro de especímenes. Ha sobrevivido no solo cinco siglos, sino también el salto a la composición tipográfica electrónica, permaneciendo esencialmente sin cambios. Se popularizó en el1960con el lanzamiento de hojas de Letraset que contienen pasajes de Lorem Ipsum y, más recientemente, con software de autoedición como Aldus PageMaker que incluye versiones de Lorem Ipsum. Esahecho establecido hace mucho tiempo queael lector se distraerá con lo legiblecontenidodeapágina al mirar su diseño. El punto de usar Lorem Ipsum es que tieneamás o menosnormaldistribución de cartas, a diferencia deausando 'Contenidoaquí,contenidoaquí', haciendo que parezca un inglés legible. Muchos paquetes de autoedición y editores de páginas web ahora usan Lorem Ipsum como su modelo de texto predeterminado yala búsqueda de 'lorem ipsum' descubrirá muchos sitios web que todavía están en su infancia. división>cuerpo>

    Agregar CSS

    • Selecciona elcolor de fondo,ancho, yalturapropiedades para el
      elemento.
    • Utilizar eldesbordamiento-xpropiedad para especificar si el contenido debe estar oculto, visible o desplazarse horizontalmente cuando el contenido desborda los bordes izquierdo y derecho del elemento. Establezca el valor "oculto".
    • Utilizar eldesbordamiento-ypropiedad para especificar si el contenido debe estar oculto, visible o desplazarse verticalmente cuando el contenido desborda los bordes superior e inferior del elemento. Establezca el valor "automático".
    • Utilizar eltexto alineadopropiedad con su valor "centro".
      • división.Desplazarse{color de fondo:#fed9ff;ancho:600px;altura:150px;desbordamiento-x: oculto;desbordamiento-y: automático;texto alineado: centro;relleno:20px;}

      ¡Juntemos las partes y veamos el código completo!

      Ejemplo de cómo hacer que un
      se pueda desplazar verticalmente usando las propiedades overflow-x y overflow-y:
      html><html> <cabeza> <título>Título del documentotítulo> <estilo> división.Desplazarse{color de fondo:#fed9ff;ancho:600px;altura:150px;desbordamiento-x: oculto;desbordamiento-y: automático;texto alineado: centro;relleno:20px; }estilo> cabeza> <cuerpo> <h2>W3docsh2> <división clase="Desplazarse">Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición tipográfica. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde la década de 1500, cuando un impresor desconocido tomó una galera de tipos y la mezcló para hacer un libro de muestras tipográficas. Ha sobrevivido no solo cinco siglos, sino también el salto a la composición tipográfica electrónica, permaneciendo esencialmente sin cambios. Se popularizó en la década de 1960 con el lanzamiento de hojas de Letraset que contenían pasajes de Lorem Ipsum y, más recientemente, con software de autoedición como Aldus PageMaker, que incluía versiones de Lorem Ipsum. Es un hecho establecido desde hace mucho tiempo que un lector se distraerá con el contenido legible de una página cuando mire su diseño. El punto de usar Lorem Ipsum es que tiene una distribución de letras más o menos normal, en lugar de usar 'Contenido aquí, contenido aquí', lo que hace que parezca un inglés legible. Muchos paquetes de autoedición y editores de páginas web ahora usan Lorem Ipsum como su modelo de texto predeterminado, y una búsqueda de 'lorem ipsum' descubrirá muchos sitios web que aún están en su infancia.división> cuerpo>html>

      Resultado

      Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición tipográfica. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde la década de 1500, cuando un impresor desconocido tomó una galera de tipos y la mezcló para hacer un libro de muestras tipográficas. Ha sobrevivido no solo cinco siglos, sino también el salto a la composición tipográfica electrónica, permaneciendo esencialmente sin cambios. Se popularizó en la década de 1960 con el lanzamiento de hojas de Letraset que contenían pasajes de Lorem Ipsum y, más recientemente, con software de autoedición como Aldus PageMaker, que incluía versiones de Lorem Ipsum. Es un hecho establecido desde hace mucho tiempo que un lector se distraerá con el contenido legible de una página cuando mire su diseño. El punto de usar Lorem Ipsum es que tiene una distribución de letras más o menos normal, en lugar de usar 'Contenido aquí, contenido aquí', lo que hace que parezca un inglés legible. Muchos paquetes de autoedición y editores de páginas web ahora usan Lorem Ipsum como su modelo de texto predeterminado, y una búsqueda de 'lorem ipsum' descubrirá muchos sitios web que aún están en su infancia.

      Ejemplo de cómo hacer que un
      se pueda desplazar verticalmente usando la propiedad de desbordamiento:
      html><html> <cabeza> <título>Título del documentotítulo> <estilo> división.Desplazarse{color de fondo:#fed9ff;ancho:600px;altura:150px;Desbordamiento: automático;texto alineado: justificar;relleno:20px; }estilo> cabeza> <cuerpo> <h2>W3docsh2> <división clase="Desplazarse">Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición tipográfica. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde la década de 1500, cuando un impresor desconocido tomó una galera de tipos y la codificó para hacer un libro de muestras tipográficas. Ha sobrevivido no solo cinco siglos, sino también el salto a la composición tipográfica electrónica, permaneciendo esencialmente sin cambios. Se popularizó en la década de 1960 con el lanzamiento de hojas de Letraset que contenían pasajes de Lorem Ipsum y, más recientemente, con software de autoedición como Aldus PageMaker, que incluía versiones de Lorem Ipsum. Es un hecho establecido desde hace mucho tiempo que un lector se distraerá con el contenido legible de una página cuando mire su diseño. El punto de usar Lorem Ipsum es que tiene una distribución de letras más o menos normal, en lugar de usar 'Contenido aquí, contenido aquí', lo que hace que parezca un inglés legible. Muchos paquetes de autoedición y editores de páginas web ahora usan Lorem Ipsum como su modelo de texto predeterminado, y una búsqueda de 'lorem ipsum' descubrirá muchos sitios web que aún están en su infancia.división> cuerpo>html>

Top Articles
Latest Posts
Article information

Author: Wyatt Volkman LLD

Last Updated: 06/10/2023

Views: 5317

Rating: 4.6 / 5 (46 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Wyatt Volkman LLD

Birthday: 1992-02-16

Address: Suite 851 78549 Lubowitz Well, Wardside, TX 98080-8615

Phone: +67618977178100

Job: Manufacturing Director

Hobby: Running, Mountaineering, Inline skating, Writing, Baton twirling, Computer programming, Stone skipping

Introduction: My name is Wyatt Volkman LLD, I am a handsome, rich, comfortable, lively, zealous, graceful, gifted person who loves writing and wants to share my knowledge and understanding with you.