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:
Sin barra de desplazamiento vertical:
Sin barra de desplazamiento vertical:
< div style="overflow-x:hidden;overflow-y:hidden" o
style="overflow:hidden">prueba
Mostrar barras de desplazamiento automáticamente:
2, define tú mismo el color de la barra de desplazamiento
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 palabras y funciones. Las marqué con 7 números. A continuación, al final del código CSS, tenga en cuenta que el código del comentario CSS se coloca entre dos asteriscos dentro de dos barras, como por ejemplo: /*Ponga el código del comentario aquí*/
Cuerpo {.
scrollbar-arrow-color: #f4ae21; /*Figura 6, el color de la flecha triangular*/
scrollbar-face-color: #333 /*Figura 5, el color de la barra de desplazamiento tridimensional Color*/
scrollbar-3dlight-color: #666; /*Figura 1, el color del borde brillante de la barra de desplazamiento tridimensional*/
scrollbar-highlight-color: #666; / *Imagen 2, el color de la parte en blanco de la barra de desplazamiento*/
scrollbar-shadow-color: #999; de la sombra de la barra de desplazamiento tridimensional*/
scrollbar- darkshadow-color: #666 /*Figura 4, el color de la fuerte sombra de la barra de desplazamiento tridimensional*/
scrollbar-track-color: #666; /*Figura 7, el color de fondo de la barra de desplazamiento tridimensional*/
scrollbar-base-color:#f8f8f8; la barra de desplazamiento*/
Cursor:url(mouse.cur); /*Ratón personalizado personalizado*/}
Los dos elementos anteriores son aplicables a
,