Cómo configurar la barra de desplazamiento para DIV
En el proceso de operación real, sabemos que muchos DIV no son suficientes para mostrar todo el contenido, por lo que se deben configurar las barras de desplazamiento. Hoy le enseñaré cómo configurar la barra de desplazamiento de DIV.
Establezca barras de desplazamiento para el div y establezca sus estilos de barra de desplazamiento horizontal y barra de desplazamiento vertical. Los estilos CSS requeridos son overflow-y y overflow-x para configurar los efectos de la barra de desplazamiento derecha e inferior del objeto del cuadro div. Al mismo tiempo, también puede usar estilos CSS para ocultar la barra de desplazamiento del iframe del marco html. Se lo presentaré a continuación.
1. Comprensión básica de CSS - ARRIBA
overflow-y:scroll; siempre muestra la barra de desplazamiento vertical
overflow-y:visible: no corta el contenido Tampoco agrega una barra de desplazamiento vertical
Más información: overflow-y manual/shouce/c_overflowy.shtml
overflow-x:scroll siempre muestra una barra de desplazamiento horizontal
overflow-x:visible: No cortar contenido ni agregar barras de desplazamiento horizontal
Más información: overflow-x manual/shouce/c_overflowx.shtml
Más información sobre CSS overflow
2. Ejemplo de barra de desplazamiento de configuración de div
DIVCSS5 establece el ancho, la altura y el estilo del borde del div para el primer objeto DIV y agrega contenido de texto de demostración al cuadro DIV. Establezca el mismo estilo CSS, el mismo contenido de texto del cuadro y establezca barras de desplazamiento horizontales y verticales para observar el efecto.
El CSS del primer cuadro se denomina "divcs5-a" y el selector de estilo del segundo cuadro DIV se denomina "divcss5-b".
1. El código fuente html específico y completo es el siguiente:
<. head>
p>
Jajajajajajajajajajajajajajajajajajajaja
Para observar Para lograr el efecto, configuramos el mismo estilo CSS y el mismo estilo básico para ambos cuadros de texto DIV. X e y están configurados para ".divcss5-b" (estilos de barra de desplazamiento horizontal y vertical).
El primer cuadro ".divcss5-a" tiene demasiado contenido y desborda el cuadro DIV. El estilo está configurado para cada cuadro, por lo que no hay desbordamiento. Aparece un estilo de barra de desplazamiento desplegable en el lado derecho (Y) de la dirección vertical
Cómo ocultar la barra de desplazamiento div CSS<. /p>
DIV No hay barra de desplazamiento de forma predeterminada. Si se agrega un estilo de barra de desplazamiento, la barra de desplazamiento desaparecerá naturalmente después de eliminarlo. Si es una barra de desplazamiento que aparece en un iframe, si desea ocultar la barra de desplazamiento horizontalmente en visible o overflow-y:hidden puede ocultar la barra de desplazamiento.
Lectura relacionada:
animación de ondas CSS
Varias formas de insertar espacios en HTML
Agregar o eliminar elementos dom HTML