Deshabilitar la barra de desplazamiento en CSS
-
Establezca
overflowenhiddenpara las etiquetashtmlybodypara deshabilitar la barra de desplazamiento en CSS -
Establezca
overflow-xenhiddenpara deshabilitar la barra de desplazamiento horizontal en CSS
Este tutorial presentará algunos métodos para deshabilitar la funcionalidad de la barra de desplazamiento en una página web.
Establezca overflow en hidden para las etiquetas html y body para deshabilitar la barra de desplazamiento en CSS
Podemos usar la propiedad CSS overflow para deshabilitar la barra de desplazamiento en CSS. La propiedad overflow define el comportamiento de la barra de desplazamiento en una página web. La barra de desplazamiento se puede ocultar o hacer visible cuando el contenido de un elemento es mayor que el área especificada. Cuando usamos el valor hidden para la propiedad overflow, el contenido se recorta al área del elemento y el resto del elemento se volverá invisible. Podemos configurarlo en scroll para agregar una barra de desplazamiento para ver el resto del contenido no recortado. Usaremos PHP para generar un texto largo en nuestra página web. Luego deshabilitaremos la barra de desplazamiento.
Por ejemplo, cree una variable $text en PHP y asígnele el valor Hello World. Utilice el bucle for para iterarlo 100 veces. No olvide agregar la etiqueta br mientras muestra la variable. Esto crea 100 líneas del texto Hello World. Incluya PHP dentro de body o del HTML. En CSS, seleccione las etiquetas html y body. Establezca el margen en 0 y dé la altura de 100%. Luego, establezca la propiedad overflow en hidden.
En el siguiente ejemplo, hemos establecido la height del html y body al 100%. Significa que body y la height tendrán el 100% de la altura de sus contenedores principales. La altura de estos contenedores será igual a la altura del navegador. El texto se recortará a la altura del navegador y el resto será invisible. Incluso podemos establecer la propiedad margin en 0 si el margen ha sido anulado con algún otro valor para deshabilitar la barra de desplazamiento. Incluso podemos usar overflow-y en lugar de overflow y configurarlo como hidden. Deshabilitará la barra de desplazamiento verticalmente.
Código de ejemplo:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
Establezca overflow-x en hidden para deshabilitar la barra de desplazamiento horizontal en CSS
Podemos usar la propiedad overflow-x y establecerla en hidden para deshabilitar la barra de desplazamiento horizontal en CSS. Podemos probar la desactivación de la barra de desplazamiento horizontalmente limitando un texto a una sola línea. Podemos repetir un texto varias veces en PHP y usar CSS para forzarlo a aparecer en una línea.
Por ejemplo, repita el texto Helloo World usando PHP como en el método anterior. No utilice la etiqueta br para que el texto no aparezca en la siguiente línea. En CSS, establezca la propiedad display en inline-block para la etiqueta body. Establezca la propiedad white-space en nowrap en la etiqueta html. Luego, configure overflow-x en hidden seleccionando la etiqueta body.
Cuando establecemos display en inline-block, obliga a que el texto se muestre en una sola línea. Para lograr el texto en una sola línea, necesitamos establecer la propiedad white-space del contenedor principal en nowrap. Hasta ahora, la barra de desplazamiento horizontal ha funcionado a la perfección. Si configura overflow-x en hidden, se recortará el texto de acuerdo con la ventana gráfica y se desactivará la barra de desplazamiento horizontal.
Código de ejemplo:
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn