horizontal - ¿Es posible el relleno de la barra de desplazamiento vertical CSS a la izquierda/derecha en UL?

overflow css

Question

¿Es posible agregar relleno o margen alrededor del elemento de la barra de desplazamiento o de la barra de desplazamiento? Lo he intentado y solo puedo conseguir relleno arriba / abajo. Agregar relleno a la UL no tiene efecto en la barra de desplazamiento. Los márgenes negativos en la barra de desplazamiento no tienen efecto. Ideas? JS Fiddle aquí .

::-webkit-scrollbar {
width: 12px;
margin:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4); 

Answer 1

Esta solución crea un espacio real entre el contenido y la barra de desplazamiento (si un elemento desplazable no tiene un fondo transparente). Útil para las barras de desplazamiento de la ventana.

.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
width:16px;
height:16px;
background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
.scroll::-webkit-resizer {background:inherit;
border-right:8px solid rgba(255,255,255,.2); //optional
border-bottom:8px solid rgba(255,255,255,.2); //optional
}

Answer 2

Puede ver un ejemplo allí ( http://jsfiddle.net/6KprJ/1/ ), básicamente, olvídese de agregar margen o relleno allí, solo aumente el ancho / alto del área de desplazamiento, y disminuya el ancho del pulgar / pista.

Citado de cómo personalizar el desplazamiento personalizado?

::-webkit-scrollbar {
width: 14px;
height: 18px;
}
::-webkit-scrollbar-thumb {
height: 6px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}