▷Ocultar la barra de desplazamiento en una página HTML ✔️ Foro Ayuda 【 2024 】

Solución:

WebKit admite pseudo elementos de barra de desplazamiento que se pueden ocultar con reglas CSS estándar:

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

Si desea ocultar todas las barras de desplazamiento, utilice

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

No estoy seguro acerca de la restauración, esto funcionó, pero podría haber una forma correcta de hacerlo:

::-webkit-scrollbar {
    display: block;
}

Por supuesto, siempre puedes usar width: 0, que luego se puede restaurar fácilmente con width: auto, pero no soy fan de abusar width para ajustes de visibilidad.

Firefox 64 ahora admite la propiedad experimental de ancho de barra de desplazamiento de forma predeterminada (63 requiere que se establezca un indicador de configuración). Para ocultar la barra de desplazamiento en Firefox 64:

#element {
    scrollbar-width: none;
}

Para ver si su navegador actual es compatible con el pseudo elemento o scrollbar-width, prueba este fragmento:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Tenga en cuenta que esta no es realmente una respuesta correcta a la pregunta, porque también oculta las barras horizontales, pero eso es lo que estaba buscando cuando Google me señaló aquí, así que pensé que lo publicaría de todos modos).

Sí, algo así …

Cuando haces la pregunta “¿Se pueden eliminar las barras de desplazamiento de un navegador de alguna manera, en lugar de simplemente ocultarlas o camuflarlas?”, Todos dirán “No es posible” porque no es posible retirar las barras de desplazamiento de todos los navegadores de forma compatible y compatible, y luego está todo el argumento de la usabilidad.

Sin embargo, es posible evitar que el navegador tenga la necesidad de generar y mostrar barras de desplazamiento si no permite que su página web se desborde.

Esto solo significa que tenemos que sustituir proactivamente el mismo comportamiento que el navegador normalmente haría por nosotros y decirle al navegador gracias pero no gracias amigo. En lugar de intentar eliminar las barras de desplazamiento (que todos sabemos que no es posible) podemos evitar el desplazamiento (perfectamente factible) y desplazarnos dentro de los elementos que creamos y sobre los que tenemos más control.

Crea un div con desbordamiento oculto. Detecte cuándo el usuario intenta desplazarse, pero no puede hacerlo porque hemos desactivado la capacidad de los navegadores para desplazarse con overflow: hidden … y en su lugar mover el contenido hacia arriba usando JavaScript cuando esto ocurre. De este modo, creamos nuestro propio desplazamiento sin el desplazamiento predeterminado de los navegadores o utilizamos un complemento como iScroll.

—

Por el simple hecho de ser minucioso; todas las formas específicas del proveedor de manipular las barras de desplazamiento:

Internet Explorer 5.5 o superior

* Estas propiedades nunca formaron parte de la especificación CSS, ni fueron aprobadas o prefijadas por el proveedor, pero funcionan en Internet Explorer y Konqueror. Estos también se pueden configurar localmente en la hoja de estilo del usuario para cada aplicación. En Internet Explorer, lo encontrará en la pestaña “Accesibilidad”, en Konqueror, en la pestaña “Hojas de estilo”.

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

A partir de Internet Explorer 8, estas propiedades tenían el prefijo de proveedor de Microsoft, pero aún así nunca fueron aprobadas por el W3C.

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Más detalles sobre Internet Explorer

Internet Explorer hace scroll disponible que establece si se deshabilita o no se habilitan las barras de desplazamiento; también se puede utilizar para obtener el valor de la posición de las barras de desplazamiento.

Con Microsoft Internet Explorer 6 y posterior, cuando usa el !DOCTYPE declaración para especificar el modo compatible con los estándares, este atributo se aplica al elemento HTML. Cuando no se especifica el modo compatible con los estándares, como en versiones anteriores de Internet Explorer, este atributo se aplica al BODY elemento, NO los HTML elemento.

También vale la pena señalar que cuando se trabaja con .NET, la clase ScrollBar en System.Windows.Controls.Primitives en el marco de presentación es responsable de renderizar las barras de desplazamiento.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

MSDN. Propiedades básicas de la interfaz de usuario
W3C. Acerca de las propiedades de la barra de desplazamiento no estándar
MSDN. .NET ScrollBar (clase)

WebKit

Las extensiones de WebKit relacionadas con la personalización de la barra de desplazamiento son:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Cada uno de estos se puede combinar con pseudo-selectores adicionales:

:horizontal – La pseudoclase horizontal se aplica a cualquier barra de desplazamiento que tenga una orientación horizontal.
:vertical – La pseudoclase vertical se aplica a cualquier pieza de la barra de desplazamiento que tenga una orientación vertical.
:decrement – La pseudoclase decremento se aplica a botones y piezas de pista. Indica si el botón o la pieza de la pista disminuirá la posición de la vista cuando se use (por ejemplo, hacia arriba en una barra de desplazamiento vertical, hacia la izquierda en una barra de desplazamiento horizontal).
:increment – La pseudoclase de incremento se aplica a botones y piezas de pista. Indica si un botón o una pieza de pista incrementará la posición de la vista cuando se use (por ejemplo, hacia abajo en una barra de desplazamiento vertical, a la derecha en una barra de desplazamiento horizontal).
:start – La pseudoclase de inicio se aplica a botones y piezas de pista. Indica si el objeto se coloca antes que el pulgar.
:end – La pseudoclase final se aplica a botones y piezas de pista. Indica si el objeto se coloca después del pulgar.
:double-button – La pseudoclase de doble botón se aplica a botones y piezas de pista. Se utiliza para detectar si un botón es parte de un par de botones que están juntos en el mismo extremo de una barra de desplazamiento. En el caso de las piezas de la pista, indica si la pieza de la pista se apoya en un par de botones.
:single-button – La pseudoclase de un solo botón se aplica a botones y piezas de pista. Se utiliza para detectar si un botón está solo al final de una barra de desplazamiento. Para piezas de pista, indica si la pieza de pista linda con un botón singleton.
:no-button – Se aplica a las piezas de la pista e indica si la pieza de la pista corre o no hasta el borde de la barra de desplazamiento, es decir, no hay ningún botón en ese extremo de la pista.
:corner-present – Se aplica a todas las piezas de la barra de desplazamiento e indica si hay una esquina de la barra de desplazamiento o no.
:window-inactive – Se aplica a todas las piezas de la barra de desplazamiento e indica si la ventana que contiene la barra de desplazamiento está activa o no. (En nightlies recientes, esta pseudo-clase ahora también se aplica a :: selection. Planeamos extenderla para que funcione con cualquier contenido y proponerla como una nueva pseudo-clase estándar).

Ejemplos de estas combinaciones

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

Diseño de barras de desplazamiento – Webkit.org

Más detalles sobre Chrome

addWindowScrollHandler
public static HandlerRegistration addWindowScrollHandler (controlador Window.ScrollHandler)

Agrega un controlador Window.ScrollEvent Parámetros: controlador – el controlador Devuelve: devuelve el registro del controlador
[source](http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler(com.google.gwt.user.client.Window.ScrollHandler))

Mozilla

Mozilla tiene algunas extensiones para manipular las barras de desplazamiento, pero se recomienda que no se utilicen.

-moz-scrollbars-none Recomiendan usar overflow: hidden en lugar de esto.
-moz-scrollbars-horizontal Similar a overflow-x
-moz-scrollbars-vertical Similar a overflow-y
-moz-hidden-unscrollable Solo funciona internamente dentro de la configuración del perfil de un usuario. Deshabilita el desplazamiento de elementos raíz XML y deshabilita el uso de las teclas de flecha y la rueda del mouse para desplazarse por las páginas web.
Documentos para desarrolladores de Mozilla sobre ‘Desbordamiento’

Más detalles sobre Mozilla

Esto no es realmente útil hasta donde yo sé, pero vale la pena señalar que el atributo que controla si las barras de desplazamiento se muestran o no en Firefox es (enlace de referencia):

Atributo: barras de desplazamiento
Escribe: nsIDOMBarProp
Descripción: El objeto que controla si se muestran o no barras de desplazamiento en la ventana. Este atributo es “reemplazable” en JavaScript. Solo lectura

Por último, pero no menos importante, el acolchado es como magia.

Como se mencionó anteriormente en algunas otras respuestas, aquí hay una ilustración que se explica por sí misma.

Leccion de historia

Solo porque tengo curiosidad, quería aprender sobre el origen de las barras de desplazamiento, y estas son las mejores referencias que encontré.

10 inventos sobre el desplazamiento y las barras de desplazamiento
https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Diverso

En un borrador de especificación HTML5, el seamless El atributo se definió para evitar que aparezcan barras de desplazamiento en iFrames para que puedan combinarse con el contenido circundante en una página. Aunque este elemento no aparece en la última revisión.

los scrollbar El objeto BarProp es un elemento secundario del window objeto y representa el elemento de la interfaz de usuario que contiene un mecanismo de desplazamiento o algún concepto de interfaz similar. window.scrollbars.visible volverá true si las barras de desplazamiento están visibles.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

La API de historial también incluye funciones para la restauración del desplazamiento en la navegación de la página para mantener la posición de desplazamiento al cargar la página.

window.history.scrollRestoration se puede utilizar para comprobar el estado de la restauración del desplazamiento o cambiar su estado (anexando ="auto"https://foroayuda.es/"manual". Auto es el valor predeterminado. Cambiarlo a manual significa que usted, como desarrollador, se hará cargo de cualquier cambio de desplazamiento que pueda ser necesario cuando un usuario recorra el historial de la aplicación. Si es necesario, puede realizar un seguimiento de la posición de desplazamiento a medida que empuja las entradas del historial con history.pushState ().

—

Otras lecturas:

Barra de desplazamiento en Wikipedia
Barra de desplazamiento (Windows)
El método de desplazamiento
El método de desplazamiento: Microsoft Dev Network
iScroll en Github (mencionado en la primera sección anterior)
Scrolling and Scrollbars un artículo sobre usabilidad de Jakob Nielsen

Ejemplos de

Paneles de desplazamiento independientes sin desplazamiento del cuerpo (usando solo CSS) – Ben Frain (21/10/2014)

Colocar overflow: hidden; en la etiqueta del cuerpo de esta manera:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

El código anterior oculta la barra de desplazamiento horizontal y vertical.

Si quieres esconderte solo la barra de desplazamiento vertical, usar overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

Y si quieres esconderte solo la barra de desplazamiento horizontal, usar overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Nota: También desactivará la función de desplazamiento. Consulte las respuestas a continuación si solo desea ocultar la barra de desplazamiento, pero no la función de desplazamiento.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Ocultar la barra de desplazamiento en una página HTML