Share
Esta sugerencia lo guiará para mejorar la apariencia de las barras de desplazamiento para que coincida con el diseño de su interfaz de usuario. Vamos a echar un vistazo a lo que los navegadores WebKit nos ofrecen en términos de CSS, además usaremos un respaldo jQuery para atender a otros navegadores..
Si necesita ayuda para diseñar un componente particular de su sitio web, puede ser más rápido obtener ayuda de un profesional. Envato cuenta con expertos listos para ayudarlo a rediseñar o personalizar todo tipo de componentes web..
Cuando nos referimos a los navegadores basados en Webkit, estamos hablando esencialmente de Apple Safari y Google Chrome. Juntos, actualmente tienen más del 40% del mercado global de navegadores de escritorio. Para las tabletas, el iPad de Apple siempre usará Webkit sin importar qué navegador de la compañía se use. Google también agregó Chrome a su sistema operativo Android y, por supuesto, los Chromebook se basan en Google Chrome.
Mirando estas figuras debería haber un futuro muy brillante para el estilo de la barra de desplazamiento.!
Antes de comenzar con el tema real de estilizar las barras de desplazamiento con CSS, necesitamos una demostración funcional; Una página con barras de desplazamiento. Las barras de desplazamiento se pueden ver si:
Accentsconagua
textarea contiene suficiente texto para que aparezcan barras de desplazamiento.iframe se utiliza para mostrar una página diferente.div o cualquier otro elemento de bloque tiene su rebosar conjunto de propiedades.Por el bien de esta demo iremos con la última opción. Aquí está mi marca inicial:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla no sempre magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. En hac habitasse platea dictumst. En felis massa. Maquenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Las mecenas se sientan en el nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sed sed tellus dolor, no lobortis felis. Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. En eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, un aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesonado enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. En el metus en metus ultricies fringilla. Maecenas sed lacus aliquam nibh sempre dignissim et quis est.
Sodas de soda, sapienses, amet congue egestas, ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, pero en consecuencia tiene una identificación correcta. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh en tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.
Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Fringilla metellenteque metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consecuat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula no blandit. En ultrices vehicula pretium.
Sed ac sagittis sapiens. Curabitur varius pellentesque nunc eget molestie. Vivamus en massa arcu, ut auctor. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Portal de enum vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit en mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, no ultricies urna sodales sed. Pellentesque morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.
Es solamente un div Con un montón de contenido ficticio. Y aquí está el CSS inicial, que establece algunas dimensiones fijas y activa las barras de desplazamiento horizontal y vertical:
.contenedor ancho: 400px; altura: 300px; color de fondo: #DCDCDC; desbordamiento: desplazamiento; / * mostrando barras de desplazamiento * /
Deberías poder ver algo similar a esto:
Hace algún tiempo (varios años) se introdujeron los pseudo elementos CSS en los navegadores Webkit para orientar las barras de desplazamiento, lo que presenta la oportunidad de diseñar su página de acuerdo con su tema.
Vamos a diseñar algo, usando el -webkit- Propiedades de la barra de desplazamiento personalizada del prefijo y del webkit. Tenga en cuenta que me limito a las propiedades básicas de CSS para facilitar la comprensión, con explicación en los comentarios.
:: - webkit-scrollbar width: 15px; / * esto apunta a la barra de desplazamiento predeterminada (obligatorio) * /
Cuando este pseudoelemento esté presente, WebKit desactivará la representación de la barra de desplazamiento incorporada y solo utilizará la información proporcionada en CSS. - Surfin 'Safari
Y ahora para algunos de los otros pseudo-elementos:
:: - webkit-scrollbar-track background-color: # b46868; / * la nueva barra de desplazamiento tendrá una apariencia plana con el color de fondo establecido * / :: - webkit-scrollbar-thumb background-color: rgba (0, 0, 0, 0.2); / * esto le dará estilo al pulgar, ignorando la pista * / :: - webkit-scrollbar-button background-color: # 7c2929; / * opcionalmente, puede aplicar estilo a los botones superior e inferior (izquierda y derecha para las barras horizontales) * / :: - webkit-scrollbar-corner background-color: black; / * si aparecen tanto las barras verticales como las horizontales, tal vez la esquina inferior derecha también deba ser estilizada * /
Después de agregar este CSS, debería poder ver el siguiente efecto (nuevamente, solo los navegadores Webkit).
Así es, de hecho, IE fue el primer navegador en soportar estilos de barras de desplazamiento a través de CSS. Esto fue en los días de IE 5.5, pero solo se puede cambiar el color..
Estas propiedades todavía se pueden utilizar hoy en día; Eche un vistazo a esta propiedad única en IE 9 para fines de demostración:
body scrollbar-face-color: # b46868;
Vea cómo se vería:
Suficiente sobre WebKit. Firefox, IE y Opera también pueden unirse a la diversión. Para ellos tenemos un muy buen enfoque alternativo en forma de jScrollPane. Este complemento de jQuery está desarrollado por Kelvin Luck y será nuestro salvador del día..
El sitio web de Kelvin tiene muchos buenos ejemplos, pero para el uso básico, todo lo que tenemos que hacer es descargar jQuery y los archivos jScrollPane e implementarlos de la siguiente manera:
Sólo con el propósito de emparejar nuestro tema, vamos a abrir jquery.jscrollpane.css y edite las siguientes líneas con nuestros valores de color (para mejoras de rendimiento, es posible que desee colocar todos los estilos dentro de sus propios archivos):
.jspTrack background: # b46868; / * cambiado de #dde * / position: relative; .jspDrag background: rgba (0,0,0,0.2); / * cambiado de #bbd * / position: relative; arriba: 0; izquierda: 0; cursor: puntero;
Aquí hay una captura de pantalla de lo que verá en Firefox:
Las aplicaciones web como Gmail y Google+ (junto con muchos otros ejemplos) ya han adoptado la idea y, si este impulso continúa, quizás Firefox e IE también ofrezcan sus propias soluciones..
Espero que haya disfrutado de este Consejo rápido y espero ver lo que hace con las barras de desplazamiento en su trabajo de diseño!
Si está buscando una solución ya hecha, Envato Market ofrece una selección de barras de desplazamiento que puede conectar a su sitio web para lograr una variedad de efectos. He aquí un vistazo a algunos de ellos:
Lazybars es un plugin jQuery de barra de desplazamiento temática fácil de usar. Puede implementar estas barras de desplazamiento simplemente agregando un nombre de clase a cualquier elemento desplazable en su sitio web.
Utilice los temas que se incluyen con Lazybars o cree los suyos con algunos CSS simples..
Lazybars - Plugin jQuery de la barra de desplazamiento sensible temática“Fancy Scrollbar - WordPress” es un complemento que puede crear una barra de desplazamiento personalizada en los sitios de WordPress. Tiene muchas opciones de personalización. Puede personalizar el color, los efectos, el retraso de desplazamiento, la banda de rieles y muchos más parámetros.
Barra de desplazamiento de lujo - WordPressAwesome Custom Scrollbar es un complemento jQuery personalizado altamente personalizable de la barra de desplazamiento para su sitio web de WordPress. Con este complemento puede personalizar la barra de desplazamiento de su página web, y puede incrustar la Barra de desplazamiento personalizada mediante el código abreviado en cualquier lugar que desee, incluso en archivos de temas.
Impresionante barra de desplazamiento personalizadaDZS Scroller proporciona una barra de desplazamiento para su sitio que puede personalizar muy fácilmente a través de CSS si las tres máscaras incluidas no son suficientes. También viene con una funcionalidad mejorada como desplazarse desplazándose o desvaneciéndose al dejar el mouse. Y funciona en iPhone / iPad..
DZS ScrollerEs fácil de usar la hermosa y colorida CSS3 Scrollbar para su sitio web. Simplemente insértelo en el archivo CSS existente y disfrute de la nueva barra de desplazamiento CSS3.
Estilos CSS3 Scrollbar
