Cómo modificar el estilo predeterminado de la barra de desplazamiento
En el diseño de la página, cuando el contenido excede el cuadro, por motivos de belleza, la parte sobrante se configurará con un efecto de barra de desplazamiento. Las barras de desplazamiento predeterminadas de algunos navegadores son muy feas. ¿Sabes cómo modificar el estilo de la barra de desplazamiento? Este artículo le enseñará cómo diseñar barras de desplazamiento.
/*Como los expertos técnicos más avanzados de la industria de TI, debemos ser realistas en el estilo de cada elemento de la página y no ignoraremos ni siquiera las barras de desplazamiento. Déjame compartir contigo cómo controlar el estilo de la barra de desplazamiento a través de CSS. El código es el siguiente: */ 1 /*Definir la pista de la barra de desplazamiento*/
#style-2::-webkit. -scrollbar-track
{
color de fondo: #F5F5F5;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*Definir altura, ancho y fondo de la barra de desplazamiento*/
#style-2::-webkit-scrollbar
{
ancho: 10px;
color de fondo: rgba(0, 0, 0, 0.34); p>
/ *Definir barra de desplazamiento*/
#style-2::-webkit-scrollbar-thumb
{
color de fondo: #8b8b8b;
border-radius: 10px;
}Para lograr el desplazamiento del contenido en un solo div, se deben cumplir tres condiciones:
1. El div debe tener una altura fija. No se pueden utilizar valores flexibles como porcentaje o automático.
2. La altura del contenido debe exceder su propia altura.
3. Se debe agregar el atributo "overflow: auto".
Ocultar la barra de desplazamiento:
1. Eliminar la barra de desplazamiento horizontal:
lt; body style="overflow-x:hidden"gt;
p>
p>
2. Eliminar la barra de desplazamiento vertical:
lt; body style="overflow-y:hidden"gt;
3. desplazamiento y visualización de la barra de desplazamiento vertical:
lt; body style="overflow-x: oculto; overflow-y: scroll"gt;
4. p>
lt;body style="overflow: hide"gt; o lt;body scroll="no"gt;
Una mejor manera es configurar el color de la barra de desplazamiento para que sea completamente transparente, para que el contenido se pueda desplazar y lograr el propósito de no mostrar la barra de desplazamiento.
Aplicación:
Sin barra de desplazamiento horizontal:
lt;div style="overflow-x:hidden"gt;testlt;/divgt;
Sin barra de desplazamiento vertical
lt;div style="overflow-y:hidden"gt;testlt;/divgt;
Sin barra de desplazamiento
lt;div style="overflow-x:hidden;overflow-y:hidden" o style="overflow:hidden"gt;testlt;/divgt;
Mostrar barras de desplazamiento automáticamente
lt;div style="height: 100px; width: 100px; overflow: auto;"gt; testlt;/divgt;
Defina usted mismo el color de la barra de desplazamiento, el código es el siguiente:
Cuerpo {
scrollbar-arrow-color: #f4ae21; /*El color de la flecha triangular*/
scrollbar-face-color: #333; /*El color de la barra de desplazamiento tridimensional Color*/
scrollbar-3dlight-color: #666; /*Color del borde brillante de la barra de desplazamiento tridimensional*/
scrollbar-highlight-color: #666; /*Barra de desplazamiento El color de la parte en blanco*/
scrollbar-shadow-color: #999; bar shadow*/
scrollbar-darkshadow-color: #666 /* El color de la fuerte sombra de la barra de desplazamiento tridimensional*/
scrollbar-track-color: #666; /*El color de fondo de la barra de desplazamiento tridimensional*/
scrollbar-base-color: #f8f8f8; /*Color básico de la barra de desplazamiento*/
Cursor : url(mouse.cur); /*Ratón personalizado*/
}Los 2 elementos anteriores son aplicables a lt;bodygt;
Adjunto: Explica el atributo overflow y sus diferentes funciones:
overflow: visible; no corta el contenido ni añade barras de desplazamiento. valor predeterminado. Al utilizar este valor, no importa cuáles sean los valores de "ancho" y "alto" establecidos, el contenido se verá obligado a mostrarse independientemente de si excede el rango.
overflow:auto; corta contenido y agrega barras de desplazamiento cuando es necesario.
desbordamiento: oculto; el contenido que excede la altura del objeto no se muestra.
desbordamiento: desplazamiento; siempre muestra una barra de desplazamiento vertical.
Configuración de desbordamiento para desbordamiento de contenido horizontal y vertical
Configuración de desbordamiento de contenido horizontal
Configuración de desbordamiento de contenido vertical
Los valores establecidos por los atributos anteriores son visible, desplazamiento, oculto, automático
oculto tiene el efecto opuesto a visible. Todo lo que esté más allá del "ancho" y el "alto" será invisible.
desplazamiento Las barras de desplazamiento se mostrarán independientemente de si el contenido excede el alcance.