html - personalizar - ¿Cómo evitar que un webkit-scrollbar empuje sobre el contenido de un div?

scrollbar css generator

Question

Estoy usando webkit-scrollbar y tengo problemas de estilo, ya que la barra de desplazamiento de webkit está empujando el contenido de un div hacia la izquierda, lo que hace que el contenido se desborde.

darse cuenta

• El primer cuadro usa la barra de desplazamiento predeterminada del navegador y no se desborda (bueno)
• El segundo cuadro utiliza la barra de desplazamiento del webkit que termina rompiendo el diseño. (malo / problema)

http://jsfiddle.net/ryeah/1/

Cualquier idea de lo que estoy haciendo mal con la barra de desplazamiento de webkit causa que la div se desborde. ¿Cómo podemos arreglar la segunda caja? Gracias

Código de la barra de desplazamiento de Webkit:

.box2::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
}
.box2::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
.box2::-webkit-scrollbar-button {
height: 0;
width: 0;
}
.box2::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}
.box2::-webkit-scrollbar-corner {
background: transparent;
}

Answer 1

¿Intentaste poner overflow-y:overlay en el div padre? Funciona para mí en cromo. Esta página dice que también funciona en safari.

Answer 2

Hay una forma de hacer que la barra de desplazamiento se muestre fuera del div.

Use un ancho estático y tenga la posición div como absoluta. Funciona para mi.

#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}

Esto engaña al DOM.

Answer 3

Hm ... No puedo pensar en una forma de obtener la barra de desplazamiento del kit de web en superposición. Una solución para detener el salto de línea es ocultar la barra de desplazamiento con

.box2::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
display: none;
}

de lo contrario, puede configurar el ancho de su UL en el mismo cuadro para que utilice la función de desbordamiento y se muestre debajo de la barra de desplazamiento.

.box ul {
width: 149px;
}