Cómo agregar una barra de desplazamiento personalizada en WordPress

¿Quieres agregar una barra de desplazamiento personalizada en WordPress? Cambiar el aspecto de la barra de desplazamiento puede ayudarlo a destacar, especialmente al crear un tema personalizado para su sitio web.

En este artículo, le mostraremos cómo agregar fácilmente una barra de desplazamiento personalizada en WordPress. Te mostraremos dos soluciones y podrás elegir la que mejor funcione para ti.

Problemas con los colores de la barra de desplazamiento personalizada

De forma predeterminada, CSS no viene con un conjunto de reglas que le permita cambiar las propiedades de la barra de desplazamiento. Hay algunas propuestas para agregarlo, pero por el momento no son compatibles con la mayoría de los navegadores.

Para solucionar este problema, los diseñadores y desarrolladores utilizan pseudoelementos específicos del navegador o JavaScript para anular la apariencia predeterminada de la barra de desplazamiento.

Te mostraremos ambas técnicas. Sin embargo, tenga en cuenta que debe probar su sitio con diferentes navegadores y dispositivos para asegurarse de que funcione correctamente en todos los navegadores.

Dicho esto, echemos un vistazo a cómo agregar colores de barra de desplazamiento personalizados en WordPress.

Método 1. Agregue una barra de desplazamiento personalizada en WordPress con un plugin

Este método es más simple y recomendado para la mayoría de usuarios. Sin embargo, no es compatible con navegadores móviles.

Primero, lo que debe hacer es instalar y activar el archivo Barra de desplazamiento avanzada conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe ir a Configuración »Configuración del control deslizante de color personalizado página para configurar el plugin.

Desde aquí, puede cambiar el color de la barra de desplazamiento y los colores de fondo de la guía de la barra de desplazamiento. Luego puede seleccionar el paso de desplazamiento del mouse, que es la velocidad de desplazamiento de la rueda del mouse.

También puede seleccionar si desea ocultar automáticamente la barra de desplazamiento o mostrarla siempre.

Tiene la opción de elegir la opción «Solo Cursor» que mostraría la barra de desplazamiento pero no el botón.

A continuación, encontrará opciones para configurar la velocidad de desplazamiento, cambiar la alineación de los rieles (izquierda o derecha) y habilitar el comportamiento táctil.

No olvide hacer clic en el botón Guardar cambios para almacenar su configuración.

Ahora puede visitar su sitio web para ver los colores personalizados de la barra de desplazamiento en acción.

Método 2. Agregue colores de barra de desplazamiento personalizados en WordPress usando CSS

Este método usa CSS para diseñar la barra de desplazamiento, que es más rápido que usar jQuery.

Sin embargo, solo funciona en navegadores de escritorio que utilizan el motor de renderizado WebKit como Google Chrome, Safari, Opera y otros.

No tendrá ningún efecto en los navegadores móviles o Firefox y Edge en las computadoras de escritorio.

Deberá agregar el siguiente CSS personalizado a su tema de WordPress.

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ffb400; 
	border:1px solid #ccc;
}

::-webkit-scrollbar-thumb {
  background: #cc00ff; 
	border:1px solid #eee;
	height:100px;
	border-radius:5px;
}

::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

Siéntase libre de cambiar los colores y otras propiedades CSS.

Cuando esté satisfecho, no olvide guardar sus cambios. Más tarde, puede obtener una vista previa en un navegador compatible.

Así es como se veía en nuestro sitio web de demostración cuando se ve en Google Chrome en una computadora Mac.

Esperamos que este artículo le haya ayudado a aprender a agregar una barra de desplazamiento personalizada en WordPress. También puede consultar nuestra guía sobre cómo crear fácilmente un tema de WordPress personalizado sin escribir ningún código.