Cómo hacer una barra de desplazamiento personalizada para un DIV

Escrito por carmen grant | Traducido por jane laury
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer una barra de desplazamiento personalizada para un DIV
Cambia la barra de desplazamiento en las páginas web de Internet Explorer con el código de diseño. (Ablestock.com/AbleStock.com/Getty Images)

Puedes cambiar la barra de desplazamiento en tu página web para actualizar la apariencia de tu sitio y darle un toque personal a su diseño. Desafortunadamente, los siguientes cambios de código sólo funcionan en Internet Explorer ya que los otros motores de búsqueda tienen estrictos valores predeterminados con respecto a sus barras de desplazamiento. Sin embargo, no dejes que eso te detenga. Deja que los usuarios de Internet Explorer vean algo especial que otros navegadores no permiten. Puedes llevar a cabo esta tarea usando hojas de estilos o incrustando código.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

    Usa una hoja de estilo

  1. 1

    Abre la hoja de estilos de tu navegador de Internet.

  2. 2

    Añade el siguiente código a tu hoja de estilos:

    "HTML {scrollbar-face-color: #FF0000; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #00FF00; scrollbar-3dlight-color: #FF00FF; scrollbar-darkshadow-color: #00FFFF; scrollbar-track-color: #FFFF00; scrollbar-arrow-color: #000000;}"

  3. 3

    Modifica cada aspecto de la barra de desplazamiento que desees cambiar con un código de color hexadecimal.

  4. 4

    Guarda el documento HTML y las hojas de estilos, y cárgalas al servidor de tu sitio web a través del cPanel (panel de control).

  5. 5

    Previsualiza los cambios en Internet Explorer.

    Inserta el código

  1. 1

    Si prefieres insertar el código en HTML y no utilizar una hoja de estilos, copia y pega el siguiente código:

    "<html> <head> <title>Your web page title</title> <style type="text/css"> <!-- html {scrollbar-base-color: #FF9900} --> </style> </head> </body> Your web page content </body> </html>"

  2. 2

    Amplía las funciones de edición de la barra de desplazamiento, mediante la adición de los siguientes códigos y cambios de color directamente en la página HTML:

    html {

    scrollbar-face-color: #FF0000; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #00FF00; scrollbar-3dlight-color: #FF00FF; scrollbar-darkshadow-color: #00FFFF; scrollbar-track-color: #FFFF00; scrollbar-arrow-color: #000000;"

  3. 3

    Guarda los cambios y carga el nuevo documento HTML en tu página web a través del cpanel (Panel de control).

  4. 4

    Previsualiza los cambios en Internet Explorer.

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