One place for hosting & domains

      barras

      Cómo cambiar el estilo de las barras de desplazamiento con CSS


      Introducción

      En septiembre de 2018, las barras de desplazamiento de CSS de W3C definieron especificaciones para personalizar el aspecto de las barras de desplazamiento con CSS.

      A partir de 2020, 96 % de los usuarios de Internet ejecutan navegadores que admiten el estilo de barra de desplazamiento de CSS. Sin embargo, deberá escribir dos conjuntos de reglas de CSS para abarcar Blink y WebKit y también los navegadores de Firefox.

      En este tutorial, aprenderá a usar CSS para personalizar barras de desplazamiento para admitir navegadores modernos.

      Requisitos previos

      Para seguir este artículo, necesitará lo siguiente:

      Agregar estilo a las barras de desplazamiento en Chrome, Edge y Safari

      Actualmente, agregar estilo a las barras de desplazamiento para Chrome, Edge y Safari está disponible con el seudoelemento del prefijo de proveedor -webkit-scrollbar.

      A continuación, se muestra un ejemplo que utiliza los seudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-track y ::webkit-scrollbar-thumb:

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      A continuación, se muestra una captura de pantalla de la barra de desplazamiento que se genera con estas reglas de CSS:

      Captura de pantalla de una página web de ejemplo con una barra de desplazamiento personalizada con una barra de desplazamiento azul en un recuadro de desplazamiento anaranjado.

      Este código funciona en las últimas versiones de Chrome, Edge y Safari.

      Desafortunadamente, W3C abandonó formalmente esta especificación y probablemente quedará obsoleta con el paso del tiempo.

      Agregar estilo a las barras de desplazamiento en Firefox

      Actualmente, aplicar estilo a las barras de desplazamiento en Firefox está disponible con las nuevas barras de desplazamiento de CSS.

      A continuación, se muestra un ejemplo que utiliza las propiedades scrollbar-width y scrollbar-color:

      body {
        scrollbar-width: thin;          /* "auto" or "thin" */
        scrollbar-color: blue orange;   /* scroll thumb and track */
      }
      

      A continuación, se muestra una captura de pantalla de la barra de desplazamiento que se genera con estas reglas de CSS:

      Captura de pantalla de una página web de ejemplo con una barra de desplazamiento personalizada con una barra de desplazamiento azul en un recuadro de desplazamiento anaranjado.

      Esta especificación comparte algunos puntos en común con la especificación -webkit-scrollbar para controlar el color de la barra de desplazamiento. Sin embargo, actualmente no se puede modificar el relleno y la redondez del “botón de desplazamiento”.

      Crear estilos de barra de desplazamiento a prueba del futuro

      Puede escribir su CSS de tal manera que sea compatible con las especificaciones -webkit-scrollbar y CSS Scrollbars.

      A continuación, se muestra un ejemplo que utiliza scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

      /* Works on Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      
      *::-webkit-scrollbar-track {
        background: orange;
      }
      
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Los navegadores Blink y WebKit ignorarán las reglas que no reconocen y aplicarán las reglas -webkit-scrollbar. Los navegadores de Firefox ignorarán las reglas que no reconocen y aplicarán las reglas de CSS Scrollbars. Una vez que los navegadores Blink y WebKit ya no sean compatibles por completo con la especificación -webkit-scrollbar, regresarán fácilmente a la nueva especificación de las barras de CSS Scrollbar.

      Conclusión

      En este artículo, aprendió a usar CSS para agregar estilo a las barras de desplazamiento y garantizar que estos estilos sean reconocidos en la mayoría de los navegadores modernos.

      También es posible simular una barra de desplazamiento ocultando la barra de desplazamiento predeterminada y usando JavaScript para detectar la altura y la posición de desplazamiento. Sin embargo, estos enfoques tienen limitaciones a la hora de reproducir experiencias como el desplazamiento por inercia (por ejemplo, desactivar el movimiento al desplazarse con trackpads).

      Si desea obtener más información sobre CSS, consulte nuestra página del tema CSS para consultar ejercicios y proyectos de programación.



      Source link

      Como estilizar barras de rolagem com o CSS


      Introdução

      Em setembro de 2018, a W3C CSS Scrollbars definiu especificações para a personalização da aparência de barras de rolagem com o CSS.

      Desde 2020, 96% dos usuários da internet já estão utilizando navegadores que suportam a estilização da barra de rolagem do CSS. No entanto, você precisará escrever dois conjuntos de regras CSS para cobrir o Blink e WebKit, bem como os navegadores Firefox.

      Neste tutorial, você irá aprender a como usar o CSS para personalizar barras de rolagem para dar suporte a navegadores modernos.

      Pré-requisitos

      Para acompanhar este artigo, você irá precisar do seguinte:

      Estilizando barras de rolagem no Chrome, Edge e Safari

      Atualmente, a estilização de barras de rolagem para o Chrome, Edge e o Safari está disponível com o pseudoelemento do prefixo de fabricante -webkit-scrollbar.

      Aqui está um exemplo que usa os pseudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-track e ::webkit-scrollbar-thumb:

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      Aqui está uma captura de tela da barra de rolagem produzida com essas regras do CSS:

      Captura de tela de uma página de exemplo com uma barra de rolagem personalizada sendo uma barra de rolagem azul em uma faixa laranja.

      Este código funciona nas versões mais recentes do Chrome, Edge e Safari.

      Infelizmente, essa especificação foi oficialmente abandonada pela W3C e provavelmente será descontinuada ao longo do tempo.

      Estilizando barras de rolagem no Firefox

      Atualmente, a estilização de barras para o Firefox está disponível com as novas CSS Scrollbars.

      Aqui está um exemplo que usa as propriedades scrollbar-width e scrollbar-color:

      body {
        scrollbar-width: thin;          /* "auto" or "thin" */
        scrollbar-color: blue orange;   /* scroll thumb and track */
      }
      

      Aqui está uma captura de tela da barra de rolagem produzida com essas regras do CSS:

      Captura de tela de uma página de exemplo com uma barra de rolagem personalizada sendo uma barra de rolagem azul em uma faixa laranja.

      Essa especificação possui algumas características em comum com a especificação -webkit-scrollbar para o controle da cor da barra de rolagem. No entanto, atualmente, não há suporte para modificar o preenchimento e arredondamento para o “track thumb”.

      Construindo estilos de barra de rolagem à prova do tempo

      É possível escrever seu CSS de forma a suportar tanto as especificações de -webkit-scrollbar quanto das CSS Scrollbars.

      Aqui está um exemplo que usa scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track e ::webkit-scrollbar-thumb:

      /* Works on Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      
      *::-webkit-scrollbar-track {
        background: orange;
      }
      
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Os navegadores Blink e WebKit irão ignorar as regras que eles não reconhecem e aplicar as regras de -webkit-scrollbar. Os navegadores Firefox irão ignorar as regras que não reconhecem e aplicar as regras de CSS Scrollbars . Assim que os navegadores Blink e WebKit descontinuarem totalmente a especificação -webkit-scrollbar, eles passarão a utilizar as novas especificações das CSS Scrollbars.

      Conclusão

      Neste artigo, foi apresentada a utilização do CSS para estilizar barras de rolagem e como garantir que esses estilos sejam reconhecidos na maioria dos navegadores modernos.

      Também é possível simular uma barra de rolagem escondendo a barra de rolagem padrão e usando o JavaScript para detectar a altura e a posição de rolagem. No entanto, essas abordagens enfrentam limitações com a reprodução de experiências como a rolagem por inércia (por exemplo, o movimento em decadência ao fazer a rolagem com trackpads).

      Se quiser aprender mais sobre o CSS, confira nossa página de tópico do CSS para exercícios e projetos de programação.



      Source link