webkit css barra de desplazamiento estilo

¿Hay alguna manera de deshacerse de la pista de desplazamiento por completo? ¿O hacer que se superponga al contenido en lugar de dejarlo de lado? Al igual que iOS/Lion barras de desplazamiento?webkit css barra de desplazamiento estilo

Lo siguiente es bastante aproximado, pero aunque la pista es transparente, el contenido de la región desplazable se desplaza y se muestra el fondo de la página.

::-webkit-scrollbar { 
    width:8px; 
    height:8px; 
    -webkit-border-radius: 4px; 
} 

::-webkit-scrollbar-track, 
::-webkit-scrollbar-track-piece { 
    background-color:transparent; 
} 

::-webkit-scrollbar-thumb { 
    background-color: rgba(053, 057, 071, 0.3); 
    width: 6px; 
    height: 6px; 
    -webkit-border-radius:4px; 
}

Fuente

2011-08-28 nicholas

por qué no utilizar una barra de desplazamiento personalizado, como jQuery basados [JScrollPane] (http : //jscrollpane.kelvinluck.com/)? Puede diseñarlo para que se extienda sobre el contenido, si lo desea. – Artyom

He intentado con jScrollPane, así como con algunas de mis propias soluciones que usan traduciones css3, posiciones CSS, etc. ... ninguna es tan rápida como una barra de desplazamiento real. Simplemente parece una sobrecarga adicional para algo que ya está incorporado en el navegador. Si es posible usar los scrollers existentes en lugar de algunos javascript falsos, parece una mejor idea. – nicholas

He encontrado que http://www.baijs.nl/tinyscrollbar/ funciona muy bien y es rápido (en términos de la respuesta del contenido al desplazamiento) y muy fácil de configurar. –

Hmm, pensé que éste contestó con anterioridad, tal vez no:

ocultar el desbordamiento en el cuerpo
envolver todo el contenido del sitio o lo que sea que estés con un desplazamiento div,
Incluya las propiedades CSS para div (overflow: scroll o overflow-y: scroll).

Ahora puede establecer la pista css a cualquier opacidad usando rgba (0,0,0,0.3) porque el desplazamiento no es parte del cuerpo.

Otro consejo para la personalización de Firefox barra de desplazamiento si desea experimentar es:

Haz lo que rebose y para superponer la barra de desplazamiento (a través de z-index) con un div transparente de cualquier color que te gusta,
Coloque el div en toda la sección de desplazamiento (probablemente algo como posición: absoluta; derecha: 0; si está utilizando el desplazamiento para la ventana completa)
Utilice los eventos de puntero: ninguno; en los divs css para que sea semitransparente.

Le dará al scroll de Firefox un poco de color/textura. (Puede ser ideal para forzar el desplazamiento hacia la derecha de la comparabilidad)

yo no lo he probado todavía, pero es factible

Fuente

2012-03-24 16:43:05 Undefined

No estoy seguro de entender lo que quieres decir. Mira este plan: http://plnkr.co/edit/hbBT0lehOHlD0cizHmVn?p=preview. Lo que estoy buscando hacer es conseguir que los párrafos rojos se ajusten completamente hacia la derecha, y el pulgar de desplazamiento azul flote sobre ellos. Si pudiera sacar un poco el dedo pulgar azul de los bordes, incluso mejor. – nicholas

webkit css barra de desplazamiento estilo

Respuesta

Cuestiones relacionadas