Cómo ocultar la barra de desplazamiento mientras se desplaza el uso de CSS?

CSS | Ocultar las barras de desplazamiento : Aquí, vamos a aprender cómo ocultar la barra de desplazamiento mientras se desplaza el uso de CSS?

Introducción:

Siempre es bueno tener un sitio web de respuesta o de la página web, para crear dichos sitios o páginas web que tenemos que hacer uso de nuestras habilidades de desarrollo en gran medida a lograr la funcionalidad así como la apariencia de la página web o sitio web. CSS ayuda a hacer este tipo de tareas fácil, ya que se utiliza CSS estilo class y varios atributos de estilo se utilizan profundamente para crear una página muy sensible y atractivo sitio web o web. Cualquier persona puede crear sitios web o páginas web, con un amplio conocimiento, sino todos los sitios web creativas y únicas o páginas web exigir algo más allá de las habilidades fundamentales del conocimiento.

Como sabemos, podemos utilizar CSS for estilizar nuestra página web o página web, por lo tanto el tema de esta sección también se relaciona con CSS. Así que vamos a seguir adelante y veamos cómo podemos ocultar las barras de desplazamiento, mientras que el uso de CSS, que sería muy cool, ¿verdad? ¿Entonces cómo hacemos eso? ¿Hay un método? ¿Hay una propiedad particular de hacerlo? Bueno, si usted se está preguntando si hay una cierta propiedad para lograr esto, entonces estás en lo correcto. Vamos a echar un vistazo a esta propiedad!

propiedad:

Para ocultar la barra de desplazamiento puede usar -webkit- y pantalla a ninguno . Bueno, ¿por qué sólo WebKit? La respuesta a eso es que WebKit propiedad está apoyado por un gran grupo de exploradores, for ejemplo, Chrome, Safari, etc. Por lo tanto, sería conveniente implementar la propiedad WebKit si usted está planeando para ocultar la barra de desplazamiento. Aunque hay propiedades class diferentes navegadores que se enumeran a continuación,

  • class Firefox se puede utilizar -moz- .
  • class Internet Explorer, puede utilizar -MS- .

Nota:

Sería bastante fresco si podemos ocultar nuestra barra de desplazamiento mientras se desplaza, pero hay algunos puntos muy importantes que usted debe considerar antes de proceder a poner en práctica este método.

  • Debe prefiere ocultar la barra de desplazamiento sólo cuando esté seguro de que el contenido de su sitio web o página web todavía sería visible para el usuario porque el usuario puede omitir el contenido.
  • Usted debe tratar de evitar el desplazamiento horizontal en sus páginas web o sitios web y también debe tratar de evitar ocultar barras de desplazamiento horizontal, como se hace difícil leer el contenido.
  • Incluso si todavía desea ocultar la barra de desplazamiento, a continuación, colocar toda la información importante acerca de la página web o sitio web encima de la tapa.

Sintaxis:

    element::-webkit-scrollbar{
display:none;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #f40;
color: #fff;
width: 200px;
height: 200px;
border: 1px dotted black;
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<h2>Hide scrollbar while scrolling</h2>
<p>Scroll the below div element</p>
<div>
This is includeHelp. This is includeHelp. This is includeHelp.
This is includeHelp. This is includeHelp. This is includeHelp.
This is includeHelp. This is includeHelp. This is includeHelp.
This is includeHelp. This is includeHelp. This is includeHelp.
This is includeHelp. This is includeHelp. This is includeHelp.
This is includeHelp. This is includeHelp. This is includeHelp.
This is includeHelp. This is includeHelp. This is includeHelp.
This is includeHelp. This is includeHelp. This is includeHelp.
</div>
</body>
</html>

salida

How to hide scroll bar while scrolling using CSS? - 4

En el ejemplo anterior, intente ejecutar el código y desplazarse por el contenido dentro de la div elemento.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *