Foros del Web » Programando para Internet » Javascript »

Implementar scrollbar personalizado a un div

Estas en el tema de Implementar scrollbar personalizado a un div en el foro de Javascript en Foros del Web. Hola amigos a ver si me pueden ayudar: Tengo el siguiente codigo que me permite personalizar mi barra de scrollbar y hacerla mas bonita esteticamente ...
  #1 (permalink)  
Antiguo 29/08/2014, 04:05
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Implementar scrollbar personalizado a un div

Hola amigos a ver si me pueden ayudar:

Tengo el siguiente codigo que me permite personalizar mi barra de scrollbar y hacerla mas bonita esteticamente y un efecto smooth en el movimiento .


El asunto es que el objetivo es aplicarlo solo a un div cuyo id="contenedor_galeria"

pero lo que me ocurre es que a parte de implementarse en el div , tambien se implementa en el navegador de la pagina en el scroobar vertical.

y claro solo necesito que se impplemente en el div y no en digamos el body entero.

Si me pudieran ayudar les estaria muy agradecido este es el codigo:

Código Javascript:
Ver original
  1. var nice1,nice2;
  2.       var body;
  3.       var off;
  4.    
  5.       $(window).load(function(){
  6.         off = $("#contenedor_galeria").position();
  7.         off.top+=2;
  8.         off.left+=2;
  9.         $("#contenedor_galeria").scroll();
  10.       });
  11.      
  12.       function initScroll() {
  13.    
  14.         var tb = $('#nctouch').prop("checked");
  15.      
  16.         if (nice1) nice1.remove();
  17.      
  18.         nice1 = $("#contenedor_galeria").niceScroll({touchbehavior:tb,cursorcolor:"#555452",cursoropacitymax:0.6,cursorwidth:5,horizrailenabled:true,background:"none",autohidemode:false});
  19.         $("#ncver").html(nice1.version);
  20.    
  21.         $("#contenedor_galeria").scroll(function(e) {
  22.           if (!off) return;
  23.           var px = $("#contenedor_galeria").scrollLeft() - off.left;
  24.           var py = $("#contenedor_galeria").scrollTop() - off.top;
  25.           body.style.backgroundPosition=-px+"px "+-py+"px";
  26.          
  27.           $("#infoscrolll").html($("#contenedor_galeria").scrollLeft()+'x'+$("#contenedor_galeria").scrollTop());
  28.         });
  29.        
  30.         $("#contenedor_galeria").scroll();
  31.  
  32.       }
  33.      
  34.       $(document).ready(function() {
  35.      
  36.         body = document.getElementsByTagName("body")[0];
  37.      
  38.         $('body').niceScroll({cursoropacitymax:0.8,cursorwidth:8});
  39.        
  40.         $('#nctouch').iphoneStyle().change(function(){      
  41.           initScroll();
  42.         });
  43.        
  44.         initScroll();
  45.        
  46.       });
  47.      
  48.       function getScroll(name) {
  49.         $(name).scrollTop(Math.floor(Math.random()*3000));
  50.       }
  51.    
  52.       function getScroll2D(name) {
  53.         $(name).getNiceScroll().doScrollPos(Math.floor(Math.random()*4000),Math.floor(Math.random()*4000),150);
  54.       }


Gracias de antemano.
  #2 (permalink)  
Antiguo 29/08/2014, 04:57
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Implementar scrollbar personalizado a un div

y si no has de usar jquery??
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 29/08/2014, 05:53
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Implementar scrollbar personalizado a un div

No te entiendo , como que si no has de usar jquery.

necesito el scrollbar personalizado en un div del documento pero que no me personalize tambien el scrollbar del body .


el codigo logicamente lo necesito y precisa de jquery para ello.

pero lo que se configura es este codigo que he puesto


Imagino que es una tonteria lo que hay que retocar pero no doy con la tecla por eso pido ayuda.
  #4 (permalink)  
Antiguo 29/08/2014, 11:32
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Implementar scrollbar personalizado a un div

Bueno ya he dado con la solucion, para todo/toda persona que le pueda interesar:

solo hay que comentar esta linea:

Código Javascript:
Ver original
  1. //$('body').niceScroll({cursoropacitymax:0.8,cursorwidth:8});

Saludos.
  #5 (permalink)  
Antiguo 29/08/2014, 12:56
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Implementar scrollbar personalizado a un div

Cita:
Iniciado por mensajeescrito Ver Mensaje
el codigo logicamente lo necesito y precisa de jquery para ello.
esto es lo que hace el uso abusivo de librerías; crear analfabetos funcionales en cuestión de programación
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: implementar, personalizado, scrollbar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:55.