Cómo poner una barra de desplazamiento en mi página

Escrito por david gitonga | Traducido por walter f. stocco
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo poner una barra de desplazamiento en mi página
La adición de barras de desplazamiento en una página web requiere una pequeña pieza de código CSS. (Comstock/Comstock/Getty Images)

Al leer un correo electrónico o al desplazarte a través de un documento Word o de texto, querrás tener la barra de formato a la vista en todo momento. Esto se logra más bien al tener barras de desplazamiento dentro de los contenedores. Cascading Style Sheets (CSS – en inglés) se utiliza para producir secciones desplazables de tu página web o para hacer que toda la página use las barras de desplazamiento con unas pocas líneas de código. Una propiedad CSS llamada "desbordamiento" se utiliza para producir dichas barras en una página.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre la aplicación Bloc de notas y copia el código de abajo:

    .scrollbars {overflow:scroll; height:300px;}

    El código anterior define la propiedad "desbordamiento" y crea un cuadro de desplazamiento que es de 300px.

  2. 2

    Guarda el archivo en el paso 1 como "scrollbar.css".

  3. 3

    Abre la página en la que desees que aparezcan las barras de desplazamiento y agrega el código siguiente a la sección entre las pestañas <head> y </head>:

    <link href= “scrollbar.css” type= “text/css” rel= “stylesheet”>

    Esta línea de código hace referencia a la "scrollbar.css" que has creado y añade la información de ese archivo en tu página.

  4. 4

    Utiliza las pestañas <div> para añadir las barras de desplazamiento a las partes de la página en las que desees que se apliquen las barras de desplazamiento como se muestra:

    <div class= “scrollbars”> My Page Contents (Los contenidos de mi página) </ div>

    El código anterior añade barras de desplazamiento a la zona de la página que contiene las " My Page Contents". Puedes especificar otras secciones de la página, simplemente añadiendo la línea "<div class= "scrollbars"> al objetivo div.

  5. 5

    Guarda "scrollbars.css" y la página para mostrar las barras de desplazamiento en el mismo directorio.

  6. 6

    Abre la página con un navegador web para ver si se realiza adecuadamente.

Consejos y advertencias

  • Al agregar barras de desplazamiento a una página web alojada, asegúrate de que el archivo CSS se encuentre en el mismo directorio raíz que tus otras páginas web, de lo contrario no se le hará referencia y las barras de desplazamiento no se mostrarán.
  • El código CSS para la visualización de las barras de desplazamiento se puede añadir a un archivo CSS existente que realiza otros elementos en una página web. Para agregar barras de desplazamiento a cualquier sección de una página, sólo tienes que hacer referencia a esta en la primera sección de la etiqueta div que lleva el contenido a ser desplazado.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles