En este tutorial aprenderemos a cambiar la barra scroll que viene por defecto en nuestros navegadores, utilizando NiceScroll.
La barra scroll que traen los navegadores web, no resulta ser del todo agradable en la mayoría de estos y, nos vemos en la necesidad de querer cambiarle el estilo, NiceScroll es una herramienta que nos ayuda a darle otro estilo, más que una herramienta es un plugin en base a jQuery. A continuación veremos cómo se usa:
Instalación:
Descargamos jQuery, lo encontramos en su web oficial: Descargar jQuery Aquí. Se debe descargar desde la versión 1.5x y posteriores.
Descargamos el plugin NiceScroll que se encuentra en GitHub: Descargar NiceScroll Aquí.
Creamos un documento html, en la sección de scripts de JavaScript de nuestro documento colocamos jQuery y luego el plugin NiceScroll, usando el elemento "script", respetando ese orden para su funcionamiento correcto.
De esta manera ya tenemos instalado o en todo caso cargado el plugin NiceScroll para poder iniciar.
¿Cómo cambiar la barra Scroll?
Creamos un contenedor en nuestro archivo html usando el elemento "div", le agregamos una clase contenedor, establecemos estilos CSS, solo para el caso de este ejemplo, dándole una altura de 900px, un ancho de 50%, y un color al elemento de clase contenedor; luego nos dirigimos a la sección de scripts y usamos el elemento "script" para agregar código jQuery, el cual inicia el llamado cuando todo el documento html y los archivos css se han cargado con la línea de código $(document).ready(), posteriormente se inicializa la función niceScroll() seleccionando la etiqueta html que permitirá que ocurra el efecto nicescroll sobre todo el documento html.
Resultado de este ejemplo, podemos visualizar una barra scroll diferente y sobre todo que tiene una apariencia mucho mejor a la barra por defecto.
Ahora supongamos que tenemos un texto que sobrepasa la altura fija de un contenedor, necesitamos colocar una barra scroll para poder ver todo el texto, entonces usaremos NiceScroll para dar mejor apariencia a esta barra.
A la clase contenedor le modificamos los siguientes estilos: un ancho de 300px, una altura de 200px, mantenemos el mismo color y añadimos la propiedad overflow con el valor auto, esto es para que lo que agregamos dentro de este contenedor no se desborde, sino que más bien aparezca una barra deslizadora que permita ver todo el contenido. Dentro del elemento contenedor colocamos dos párrafos “lorem ipsum”, y luego en la función que inicializa niceScroll() seleccionamos el elemento de clase contenedor $(“.contenedor”).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla omnis ipsa facilis perspiciatis molestiae incidunt quisquam, tenetur consectetur voluptatum labore veritatis suscipit rem sunt asperiores reiciendis, eveniet ea nobis itaque!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam voluptatum consequuntur tenetur magnam aut nesciunt quasi quaerat minima fugit veniam sint pariatur eius molestias repellat possimus, aliquam architecto, iusto iure.
NiceScroll tiene opciones que pueden modificar el color de la barra al color que deseemos, usando la opción "cursorcolor" tomando el valor de un color:
$(".contenedor").niceScroll({
cursorcolor:"#F11313",
});
La Barra scroll del plugin NiceScroll, viene por defecto con bordes redondeados, si deseamos cambiarla por bordes rectangulares, usamos "cursorborderradius" y le colocamos un valor en pixeles:
$(".contenedor").niceScroll({
cursorcolor:"#F11313",
cursorborderradius:"0px"
});
Este plugin cuenta con más opciones que podemos ir modificando de acuerdo a lo que deseemos, estas opciones las encontramos en la siguiente dirección: http://areaaperta.com/nicescroll/.
De esta manera hemos aprendido a usar el plugin NiceScroll para poder cambiar la apariencia de la barra scroll rápidamente. Recuerda que para obtener más conocimiento sobre jQuery cuentas con en la plataforma con el Curso de jQuery