Pregunta Ocultar la barra de desplazamiento en una página HTML


¿Se puede usar CSS para ocultar la barra de desplazamiento? ¿Cómo harías esto?


598
2017-07-21 05:57


origen


Respuestas:


Conjunto overflow: hidden; en la etiqueta del cuerpo como este:

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

El código de arriba oculta tanto la barra de desplazamiento horizontal como la vertical.

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

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

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

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

actualización: quise decir escondido, lo siento, solo desperté :-)


Nota: También deshabilitará 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.


347
2017-07-21 06:09



Para completar, esto funciona para webkit:

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

Si desea que todas las barras de desplazamiento estén ocultas, use

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

No estoy seguro de restaurar, esto funcionó, pero podría haber una forma correcta de hacerlo:

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

Por supuesto, siempre puedes usar width: 0, que puede ser fácilmente restaurado con width: auto, pero no soy fanático de abusar width para los ajustes de visibilidad.

Para ver si su navegador actual es compatible con esto, pruebe este fragmento:

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

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  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).


792
2017-11-01 20:07



Sí, más o menos ..

Cuando hace la pregunta, "¿Pueden eliminarse las barras de desplazamiento de un navegador de alguna manera, en lugar de simplemente ocultarse o camuflarse?", Todos dirán "No es posible" porque no es posible retirar las barras de desplazamiento de todos los navegadores de una manera compatible y compatible, y luego está todo el argumento de 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 tratar de 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 hacemos y tener más control sobre ellos.

Crea un div con desbordamiento oculto. Detecta cuando el usuario intenta desplazarse pero no puede porque hemos deshabilitado la capacidad de los navegadores para desplazarse con overflow: hidden ... y en su lugar mover el contenido usando Javascript cuando esto ocurre. Creando así nuestro propio desplazamiento sin el desplazamiento predeterminado de los navegadores o usando un plugin como iScroll

---

Por el bien de ser exhaustivo; todas las formas específicas del vendedor de manipular barras de desplazamiento:

Internet Explorer 5.5+

* Estas propiedades nunca formaron parte de las especificaciones de CSS, ni fueron aprobadas ni 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 IE lo encuentras en la pestaña "Accesibilidad", en Konqueror en la pestaña "Hojas de estilo".

body, html { /* these are default, can be replaced by hex 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 IE8 estas propiedades fueron vendidas por Microsoft, pero nunca fueron aprobadas por 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

IE hace scroll disponible que establece si se desactivan o habilitan las barras de desplazamiento; también se puede usar para obtener el valor de la posición de las barras de desplazamiento.

Con Microsoft Internet Explorer 6 y posterior, cuando utiliza la declaración! DOCTYPE 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 IE, este atributo se aplica al BODY elemento, NO el 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


Webkit

Las extensiones de Webkit relacionadas con la personalización de barras 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 */

enter image description here

Estos pueden combinarse cada uno con pseudo-selectores adicionales:

  • :horizontal - La pseudoclase horizontal se aplica a cualquier pieza de la barra de desplazamiento que tenga una orientación horizontal.
  • :vertical - La pseudo-clase vertical se aplica a cualquier pieza de la barra de desplazamiento que tenga una orientación vertical.
  • :decrement - La pseudoclase de decremento se aplica a botones y piezas de pista. Indica si el botón o la pieza de seguimiento disminuirá la posición de la vista cuando se utiliza (por ejemplo, arriba en una barra de desplazamiento vertical, a 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 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 seguimiento. Indica si el objeto se coloca antes del pulgar.
  • :end - La pseudoclase final se aplica a botones y piezas de seguimiento. 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 seguimiento. Se usa para detectar si un botón forma parte de un par de botones que están juntos en el mismo extremo de una barra de desplazamiento. Para piezas de 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 usa para detectar si un botón está solo al final de una barra de desplazamiento. Para las piezas de pista, indica si la pieza de la pista hace tope con un botón singleton.
  • :no-button - Se aplica a las piezas de seguimiento e indica si la pieza de la pista se desplaza 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 presente 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 las últimas noches, esta pseudo-clase también se aplica a :: selección. Planeamos extenderla para que funcione con cualquier contenido y para proponerlo como una nueva pseudoclase 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 */ }

Más detalles sobre Chrome

addWindowScrollHandler
  Public HandlerRegistration AddWindowScrollHandler (Window.ScrollHandler handler)

Agrega un controlador Window.ScrollEvent
  Parámetros:
  controlador - el controlador
  Devoluciones:
  devuelve el registro de controlador
  [fuente] (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 el uso de desbordamiento: oculto en lugar de esto.
  • -moz-scrollbars-horizontal Similar a overflow-x
  • -moz-scrollbars-vertical Similar al desbordamiento-y
  • -moz-hidden-unscrollable Solo funciona internamente dentro de la configuración del perfil de un usuario. Inhabilita el desplazamiento de los elementos raíz XML y los desactiva mediante las teclas de flecha y la rueda del mouse para desplazarse por las páginas web.

  • Documentos de Mozilla Developer en 'Overflow'

Más detalles sobre Mozilla

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

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

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

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

enter image description here


Leccion de historia

Scrollbars

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

Diverso

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

los scrollbar El objeto BarProp es hijo de window objeto y representa el elemento de interfaz de usuario que contiene un mecanismo de desplazamiento, o algún concepto de interfaz similar. window.scrollbars.visible regresará 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 de desplazamiento en la navegación de página para mantener la posición de desplazamiento en la carga de la página. window.history.scrollRestoration se puede usar para verificar el estado de la restauración de desplazamiento o cambiar su estado (se agrega ="auto"/"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 cruce el historial de la aplicación. Si es necesario, puede realizar un seguimiento de la posición de desplazamiento a medida que introduce entradas de historial con history.pushState ().

---

Otras lecturas:

Ejemplos


424
2017-08-29 04:17



Puede lograr esto con un divisor envoltorio que tiene su desbordamiento oculto, y el div interno establecido en automático.

Para quitar la barra de desplazamiento del div interior, puede sacarlo de la ventana del div externo aplicando un margen negativo al div interno. Luego aplique igual relleno al div interno para que el contenido permanezca a la vista.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

94
2018-05-20 22:37



Puedes usar la propiedad CSS overflow y -ms-overflow-style con una combinación con ::-webkit-scrollbar.

Probado en IE10 +, Firefox, Safari y Chrome y funciona bien:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Esta es una solución mucho mejor que las otras cuando oculta la barra de desplazamiento con padding-right, porque el ancho predeterminado de la barra de desplazamiento es diferente en cada navegador.

Nota: En las últimas versiones de Firefox, -moz-scrollbars-none la propiedad está en desuso enlazar )


34
2017-08-17 11:10



Creo que encontré un trabajo para ustedes si todavía están interesados. Esta es mi primera semana, pero funcionó para mí ...

<div class="contentScroller">
<div class="content">
</div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

17
2018-02-14 09:29



Si está buscando una solución para ocultar una barra de desplazamiento para dispositivos móviles, siga La respuesta de Peter!

Aquí está un jsfiddle, que usa la solución a continuación para ocultar una barra de desplazamiento horizontal.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Probado en una tableta Samsung con Android 4.0.4 (ambos en el navegador nativo y Chrome) y en un iPad con iOS 6 (ambos en Safari y Chrome).


11
2017-12-16 20:19



Como ya dijeron las otras personas, usa el desbordamiento de CSS.

Pero si aún desea que el usuario pueda desplazar ese contenido (sin que la barra de desplazamiento sea visible), debe usar JavaScript. Se mi respuesta aquí para una solución: Oculta la barra de desplazamiento mientras todavía puedes desplazarte con el mouse / teclado


10
2017-07-21 06:27