Cómo controlar las barras de desplazamiento del navegador con CSS
Usa CSS para controlar el estilo de la barra de desplazamiento
1. Configuración de desbordamiento cuando el contenido se desborda
Configuración de desbordamiento cuando el contenido horizontal y vertical se desborda
Configuración de overflow-x cuando el contenido se desborda en la dirección horizontal
Configuración de overflow-y cuando el contenido se desborda en la dirección vertical
Los valores establecidos por los tres anteriores las propiedades son visibles, desplazables, ocultas y auto
valor predeterminado visible. 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.
El efecto de oculto es opuesto al 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. auto Cuando el contenido excede el rango, se muestra la barra de desplazamiento; de lo contrario, no se muestra.
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;
Automáticamente mostrar barras de desplazamiento:
lt;div style="height: 100px; width: 100px; overflow: auto;"gt;testlt;/divgt;
2, defina el desplazamiento usted mismo Color de la barra
Nuestro estilo de barra de desplazamiento predeterminado general es el que se muestra a la izquierda. La imagen de la derecha está ampliada 1600 veces. Podemos ver que la barra de desplazamiento tiene varias combinaciones de caracteres. 7 números, respectivamente, están comentados después del siguiente código CSS. Tenga en cuenta que el código de comentario CSS se coloca entre dos asteriscos dentro de dos barras, como por ejemplo: /*Coloque el código comentado aquí*/
Cuerpo {.
scrollbar-arrow-color: #f4ae21; /*Figura 6, el color de la flecha triangular*/
scrollbar-face-color: #333 / *Imagen 5, el color de la barra de desplazamiento tridimensional*/
scrollbar-3dlight-color: #666; /*Imagen 1, el color del borde brillante de la barra de desplazamiento tridimensional*/
scrollbar- highlights-color: #666; /*Figura 2, el color de la parte en blanco de la barra de desplazamiento*/
scrollbar-shadow-color: #999; , el color de la sombra de la barra de desplazamiento tridimensional*/
scrollbar-darkshadow-color: #666; /*Imagen 4, el color de la sombra fuerte de la barra de desplazamiento tridimensional*/
scrollbar-track-color: #666; /*Imagen 7, Color de fondo de la barra de desplazamiento tridimensional*/
scrollbar-base-color: #f8f8f8; barra de desplazamiento*/
Cursor: url(mouse.cur); /* Ratón personalizado personalizado*/}
Los dos elementos anteriores son aplicables a lt bodygt;, lt; ;, lt; textareagt;, lt; iframegt;