CSS elimina la barra de desplazamiento
Ejemplo 01:
Tomemos en HTML para crear una barra de desplazamiento automática en la página web. Para esto, no necesita agregar muchas propiedades o etiquetas distintas de las etiquetas habituales normales para párrafos y encabezados. Hemos estado comenzando este ejemplo con la creación de un nuevo archivo HTML llamado "CSS". Al abrir este archivo en el código de Visual Studio, hemos comenzado a agregarle un script HTML. La primera etiqueta que hemos agregado dentro es la etiqueta principal "html" seguida de la etiqueta "cabeza" y "cuerpo".
Cuando miramos el cuerpo de esta página HTML, tiene un encabezado del segundo tamaño más grande (i.mi., H2), y dos párrafos a través de las etiquetas "P". La primera etiqueta de párrafo contiene datos de tipo de texto largo que se mueven a la línea siguiente, mientras que el segundo párrafo contiene datos simples de una línea. El segundo párrafo también contiene una etiqueta simple "fuerte" dentro de él para hacer dos palabras en negrita. Dentro de la etiqueta "estilo" de "cabeza", hemos estado estableciendo el valor para la altura y el ancho de un "cuerpo" completo de una página HTML: 500px y 1000px respectivamente.
Guarde el script HTML acaba de agregar con Ctrl+S, toque el menú "Ejecutar" desde la barra de tareas de Visual Studio y haga clic en "Ejecutar sin depuración". Pediría la herramienta en la que se ejecutará nuestro código. Seleccione el navegador "Chrome" y estará listo para comenzar. La siguiente salida ha demostrado que el encabezado y sus dos párrafos se han mostrado. Debido a los datos de texto muy largos en el primer párrafo y el uso de ventanas pequeñas en Chrome, tenemos la barra de desplazamiento automática generada a la derecha e inferior del navegador. Esto se debe a que cualquier navegador tiene barras de desplazamiento incrustadas que se generarían en el uso de una gran cantidad de datos.
Ahora, para ver la línea restante en la página web, desplácese a la derecha utilizando la barra de desplazamiento como se muestra.
Intentemos eliminar la barra de desplazamiento de la página web. Usaremos la propiedad de desbordamiento establecida en "oculto" dentro de la etiqueta de estilo para el "cuerpo" de una página web. No permitirá que el navegador genere barras de desplazamiento automáticas incluso si agregamos una gran cantidad de datos a la página web. Vamos a guardarlo y ejecutarlo.
Después de ejecutarlo en el navegador Chrome, tenemos la salida como esperábamos. Aunque el primer párrafo contiene los datos de texto largos, el navegador no ha generado las barras de desplazamiento para ver la línea oculta restante. El tercer párrafo también está oculto en esta ventana del navegador de tamaño.
Al cambiar el tamaño del navegador Chrome usando el puntero del mouse, el tercer párrafo se ha mostrado ahora como se muestra a continuación.
Cuando ampliamos la ventana del navegador desde su lado derecho, el resto de la línea oculta se mostrará sin el uso de ninguna barra de desplazamiento.
Ejemplo 2:
Creemos otro breve ejemplo para ver cómo podemos crear más de 1 barra de desplazamiento para diferentes secciones divididas de una página HTML. Además, veremos cómo podemos eliminar una de esas barras de desplazamiento también. Comenzando con la etiqueta HTML, hemos agregado dos etiquetas "div" dentro de la etiqueta principal "cuerpo". La primera etiqueta "div" se ha especificado con la clase "A" para la diferenciación a nivel de estilo. La segunda etiqueta "div" no ha estado usando la "clase" porque hemos estado usando el estilo en línea para esta etiqueta en particular. Estamos utilizando la altura específica de 10 px y propiedad de color de fondo para colorear la sección "púrpura". Esta sección "div" contiene dos líneas. Uno de ellos está marcado con la etiqueta "Marca". La etiqueta "Marca" se usa para resaltar el texto especificado en él al color amarillo y hacerla prominente dentro de la página web. Hemos agregado la línea marcada ya que esta etiqueta usará la barra de desplazamiento. Ambas etiquetas "Div" se han terminado aquí después de la etiqueta "Marca". La etiqueta del cuerpo también se ha cerrado aquí.
Vamos a echar un vistazo a la etiqueta de estilo utilizada dentro de la etiqueta de la cabeza de este script HTML. Hemos estado usando el objeto de clase "A" para diseñar la sección externa "Div". Estamos estableciendo el ancho de la barra de desplazamiento en "ninguno" para la sección "div" externa utilizando la propiedad de ancho de carga de desplazamiento y el desbordamiento en la dirección vertical se ha habilitado estableciendo el valor "desplazamiento" para la propiedad "desbordamiento". Junto con eso, hemos estado estableciendo la altura máxima de una sección "div" externa a 100px utilizando la propiedad Max-Hiect para la clase "A". El estilo y la etiqueta principal se han completado aquí y hemos guardado nuestro código para probar la salida en el navegador Chrome a través del código de Visual Studio.
La pantalla de la página web para este script HTML se vería similar a la que se muestra en la imagen a continuación. La barra de desplazamiento para la segunda sección "div" de color púrpura que tiene una altura de 10 px se ha generado dentro de la otra sección "div" debido a su altura, 150px. El texto utilizado en él también se resalta con el uso de la etiqueta "Marca". Por otro lado, la sección "Div" externa no tiene una barra de desplazamiento visible generada en este tamaño de la ventana. Es porque establecemos el valor de la propiedad de "ancho de barra de desplazamiento" de "div" externo a "ninguno".
Puede hacer visible la barra de desplazamiento cambiando el tamaño de una ventana demasiado pequeña como se muestra. Solo se generaría la barra de desplazamiento vertical ya que hemos usado un conjunto de desbordamiento para "desplazarse". Incluso si acorta la ventana desde el lado derecho, la barra de desplazamiento horizontal nunca se generaría.
Intentemos eliminar la barra de desplazamiento vertical automática de la página web también. Para esto, intentaremos el mismo código HTML actualizando el valor de su propiedad "Overflow-y". Lo hemos estado estableciendo en "ninguno" para que no se genere una barra vertical para la sección externa "div".
Sin actualizar ninguna otra cosa dentro de este script, lo hemos ejecutado y obtuvimos la salida de Below Shows. Ahora, incluso si cambiamos el tamaño de una ventana de cromo a mucho más pequeño desde la izquierda o la delincuencia superior, no generará ninguna barra de desplazamiento vertical u horizontal para el "div" externo ".
Conclusión:
El artículo de hoy es una colección de algunos ejemplos HTML para ilustrar cómo los navegadores generan barras de desplazamiento automáticas y cómo puede eliminarlos del navegador. En el primer ejemplo, hemos probado las etiquetas de párrafo para agregar una gran cantidad de datos para generar automáticamente las barras de desplazamiento y usamos la propiedad de desbordamiento para ocultar esas barras de desplazamiento. Junto con eso, hemos tratado de eliminar específicamente las barras de desplazamiento undireccional de la página web utilizando la propiedad "Overflow-Y" de las páginas HTML. El uso de las secciones "div" fue una gran ayuda en todo.