joe pigott
estoy usando ::-webkit-scrollbar para hacer una barra de desplazamiento personalizada en Chrome. tengo un border-radius: 10px y al hacer eso, hay esquinas blancas en la parte superior:
Lo siento, es un poco difícil de ver ya que es una barra de desplazamiento.
Quiero que las esquinas sean del mismo color que el encabezado div (#dadae3). ¿Hay alguna forma de deshacerse de las esquinas blancas usando solo CSS sin cambiar los estilos de la barra de desplazamiento?
CSS (todo):
body {
padding: 0;
margin: 0
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
background: #dadae3;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
background: #aeaeb5
}
HTML:
<div style="background: #dadae3; width: 100%; height: 30px;"></div>
<div style="width: 100%; height: 1000px"></div>
Tienes que configurar el ::-webkit-scrollbar-corner pseudo-elemento, por ejemplo
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
-
Esto debería aceptarse: incluso si tiene más de 1 año de retraso, me resolvió el mismo problema en Chrome 43
– Antonio
17 de junio de 2015 a las 16:27
-
gracias. Aunque abandoné este proyecto, sigue siendo muy útil.
– Joe Pigott
1 de diciembre de 2015 a las 3:26
Puede configurar el background-color propiedad para el pseudo-elemento -webkit-scrollbaral hacerlo, puede establecer el “color de la esquina”.
-
Sí, esto funciona. Pero cuando te desplazas hacia abajo, muestra el
#dadae3contra el blanco. ¿Configuraría elbackground-colora transparente? Editar: No, no pondría elbackground-colorcomo transparente. Esto también se muestra como esquinas blancas.– Joe Pigott
27 de noviembre de 2013 a las 2:59
-
Ya es transparente (intente darle un color de fondo al iframe de salida de fiddler), pero recuerde: es una barra de desplazamiento. Si algo va detrás, activa el desplazamiento, por lo que no puede haber nada detrás.
– Carlo Cannas
27 de noviembre de 2013 a las 3:03
-
Ok, dudo que alguien note las esquinas grises en una barra de desplazamiento. PD Esto probablemente estará disponible pronto (tan pronto como mi servidor funcione >:D)
– Joe Pigott
27 de noviembre de 2013 a las 3:04
Estaba luchando contra esta esquina de la barra de desplazamiento hoy, que ocupa espacio y crea una brecha innecesaria. si uso overflow: auto en el contenedor, esta esquina de la barra de desplazamiento desaparece por completo, mientras que la barra de desplazamiento permanece visible.
tuve que personalizar webkit-scrollbar-corner como triángulo de color en lugar de cuadrado.
Aquí está el resultado de cómo hacerlo. Con truco de borde.
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}
Omar
Prueba con esto
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}
-
Estoy votando para eliminar esta respuesta. Debido a que esto es lo mismo que esta respuesta, solo puedo suponer que se publicó como “gracias” o “confirmación”. No agregue respuestas de “gracias” o “confirmación”. Una vez que tenga suficiente reputación, podrá votar las preguntas y respuestas que le hayan resultado útiles. De la revisión
–Trenton McKinney
1 sep a las 21:33
-
Estoy votando para eliminar esta respuesta. Debido a que esto es lo mismo que esta respuesta, solo puedo suponer que se publicó como “gracias” o “confirmación”. No agregue respuestas de “gracias” o “confirmación”. Una vez que tenga suficiente reputación, podrá votar las preguntas y respuestas que le hayan resultado útiles. De la revisión
–Trenton McKinney
1 sep a las 21:33