jQuery NiceScroll para un scroll mejorado en ordenadores y móviles

Escrito por: Martín el 14-11-2011 10:29:27 y leído 2799 veces

jQuery NiceScroll es un plugin, tal como indica su nombre, que mejora las barras de desplazamiento tanto en ordenadores de sobremesa, portátiles y también en dispositivos móviles. Resumiendo, y si miras la imagen más arriba, verás que es un scroll similar al de Facebook.

Realmente, por lo que vi en su web, es lo más fácil que existe para poner a funcionar... sólo basta con indicarle qué elemento (body, div, etc...) tendrá el scroll, configurar por css su aspecto y todo finalizado.

Características:

• Fácil instalación y activación, funciona sin ninguna modificación de su código.
  
• Barras de desplazamiento con mucho estilo, sin ocupar la ventana principal ya que no es necesario que esté siempre visible.
  
• Se puede modificar por CSS el estilo principal de la barra de desplazamiento.
  
• Funciona en todos los navegadores puede desplazarse: arrastrando el cursor, la rueda del ratón (velocidad adaptable), navegación con el teclado (teclas de cursor, pagup / teclas, casa / fin de teclas)
  
• Desplazamiento suave (como la navegación en un tablet), la velocidad es personalizable
  
• Característica de zoom
  
• Aceleración por hardware de desplazamiento (donde esté disponible)
  
• Para todos los principales navegadores y versiones móviles
  
• Soporte para dispositivos táctiles
  
• Compatible con muchos navegadores, incluyendo IE6, Safari en Mac y versiones de prueba de IE10!
  
• Aspecto muy personalizable de la barra

Te dejo una demo que preparé y el enlace a la web oficial para su descarga.

Código JAVASCRIPT

$(document).ready(
function() {
$("body").niceScroll();
}
);

Código JAVASCRIPT

$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
}
);

Código JAVASCRIPT

$(document).ready(
function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
}
);

Categorías: Scroll • Desplazamiento • Jquery • Javascript •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

nicescroll • jquery nicescroll • nicescroll jquery • scroll gmail • cambiar apariencia scrollbar css como facebook • html5 scroll automático • scroll facebook jquery • scrollbar cambiar color al scroll chrome • scroll jquery facebook • scroll tipo google • scrollbar para moviles y tablets • scrollbar gmail • jquery para scroll • ejemplo rueda tipo tu gmail jquery • jquery gmail scroll • nicescroll horizontal • jquery scroll tipo facebook • cambiar estilo barra desplazamiento jquery • scroll barra facebook jquery • cambiar aspecto de scrollbar javascript • nicescrool • barra de desplazamiento html5 • 3 mar 2011 cambiar las barras de desplazamiento con jquery • cambiar barra scroll jquery • scrollbar css jquery • cambiar sentido scroll jquery • barras de desplazamiento personalizada html5 • body jquery scrollbar • scroll barra lateral iphone 4 • barra siempre visible con scroll y jQuery • calendar jquery json • scroll jquery martin jquery • efecto fade scroll jquery • ajustar scroll estilo facebook • scroll jquery vertical tipo facebook • editar estilos de scroll con jquery • jquery máscara fade imágenes • jquery scroll con ruedita del mouse • nicescroll() • scroll facil javascript • javascript imagenes scroll • javascript para blogs scroll automaticos • aplicar estilo a un scrollbar html5 • scroll con estilo • barra lateral jquery blogger • scrollbar gmail javascript • barra deslizante scroll jquery • cambiar scroll javascritp css a todo • div barra jquery facebook • nicescroll jquery horizontal • plugin barra texto deslizante jquery • como darle movimiento a un scrollbar jquery • scroll css jquery • ventan jquery scroll ipad • estilo a barra de desplazamiento html5 • scroll con jquery facil • barra scroll gmail • jquery calendar gmail html5 • jquery scrollbar visibility • jquery scroll para mobiles • scroll tipo gmail • estilos para scroll 2011 • jquery navegacion scroll • scroll de gmail • inserta barra desplazamiento jquery • modificar scroll de una web parecido a facebook • jquery barra scroll estilos tipo chrome • div siempre visible al estilo de gmail jquery • scroll para ipad con jquery • modificar los scroller javascript • desplazamiento automatico jquery direcciones javascript • scrollbar facebook jquery • jquery nicescroll textarea • barra de desplazamiento para blogger • cambiar scrollbar css • gmail scrollbar jquery • javascript scroolbar movil • estilos de scroll como gmail • jquery scroll para web • jquery para cambiar scrollbar • div barra facebook jquery • plugin jquery scroll • cambiar aspecto scrollbar • scroll estilo iphone jquery • estilo a scroll • poner scroll facebook • www martiniglesias eu/demos/nicecroll • editar barra de desplazamiento con jquery • jquery scrollbar ejemplos estilo • jquery navegacion • scroll jquery gmail • scrollbar ipad jquery • calendarios de jquery para todo navegador • scroll jquery imagenes • scrollbar tipo gmail o facebook html css • nicescroll side bar • cambiar barra de scroll personalizada todos los navegadores • jquery div efecto scroll sin scroll • estilo barras de desplazamiento jquery • colocar scroll del iphone a un div •