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?

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

  

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

Si desea ocultar solo la barra de desplazamiento vertical , use overflow-y :

  

Y si quiere ocultar solo la barra de desplazamiento horizontal , use overflow-x :

  

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.

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 restaurarse fácilmente con width: auto , pero no soy partidario de abusar del width para ajustar la 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; } 
 
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.

Sí, más o menos ..

Cuando hace la pregunta, “¿Se pueden eliminar 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 eliminar las barras de desplazamiento de todos los navegadores en un compatible y compatible de manera cruzada, 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. De este modo, creamos nuestro propio desplazamiento sin el desplazamiento predeterminado de los navegadores o utilizamos un complemento 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 que el scroll esté disponible, lo 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 statement! 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 elemento BODY , NO al elemento HTML .

También vale la pena señalar que cuando se trabaja con .NET, la clase ScrollBar en System.Windows.Controls.Primitives en Presentation Framework 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 UI
  • W3C. Acerca de las propiedades de barra de desplazamiento no estándar
  • MSDN. .NET ScrollBar Class

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 horizontal se aplica a cualquier pieza de la barra de desplazamiento que tenga una orientación horizontal.
  • :vertical vertical se aplica a cualquier pieza de la barra de desplazamiento que tenga una orientación vertical.
  • :decrement decremento se aplica a los botones y a las piezas de la 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 incremento se aplica a botones y piezas de seguimiento. Indica si un botón o pieza de pista boostá o no 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 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 los botones y a las pistas. 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 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 los botones y a las piezas de la 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 la pista e indica si la pieza de la pista va o no al 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 */ } 
  • Estilo de barras de desplazamiento – Webkit.org

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 usar overflow: oculto en lugar de esto.
  • -moz-scrollbars-horizontal Similar a overflow-x
  • -moz-scrollbars-vertical Similar al overflow-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: ( enlace 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

Barras de desplazamiento

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 atributo continuo se definió para evitar que las barras de desplazamiento aparecieran en iFrames, de modo que pudieran mezclarse con el contenido circundante en una página. Aunque este elemento no aparece en la última revisión.

El objeto Barra de scrollbar BarProp es un elemento secundario del objeto window y representa el elemento de interfaz de usuario que contiene un mecanismo de desplazamiento o algún concepto de interfaz similar. window.scrollbars.visible devolverá 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 utilizar para verificar el estado de la restauración de desplazamiento o cambiar su estado (se agrega ="auto"/"manual" . Automático es el valor predeterminado. Cambiarlo a manual significa que usted como desarrollador se hará cargo de cualquier cambios de desplazamiento que pueden ser necesarios cuando un usuario atraviesa 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:

  • Barra de desplazamiento en Wikipedia
  • Barra de desplazamiento (Windows)
  • El método de desplazamiento
  • El método Scroll – Microsoft Dev Network
  • iScroll en Github (mencionado en la primera sección anterior)
  • Desplazamiento y barras de desplazamiento un artículo sobre usabilidad por Jakob Nielsen

Ejemplos

  • Paneles de desplazamiento independientes sin desplazamiento del cuerpo (solo con CSS) – Ben Frain (10-21-2014)

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

 
...

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; } 

Puede utilizar el overflow propiedad CSS y el estilo -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 , ya que el ancho predeterminado de la barra de desplazamiento es diferente en cada navegador.

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

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

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

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

Aquí hay 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).

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 encontrar una solución: ocultar la barra de desplazamiento mientras aún puede desplazarse con el mouse / teclado

Utilice la propiedad de desbordamiento css :

 .noscroll { width:150px; height:150px; overflow: auto; /* or hidden, or visible */ } 

Aquí hay algunos ejemplos más:

Cross Browser Approach para ocultar la barra de desplazamiento.

Probado Edge, Chrome, Firefox, Safari

¡Oculta la barra de desplazamiento mientras aún puedes desplazarte con la rueda del mouse! codepen

 /* make parent invisible */ #parent { visibility: hidden; overflow: scroll; } /* safari and chrome specific style, don't need to make parent invisible because we can style webkit scrollbars */ #parent:not(*:root) { visibility: visible; } /* make safari and chrome scrollbar invisible */ #parent::-webkit-scrollbar { visibility: hidden; } /* make the child visible */ #child { visibility: visible; } 

Solo pensé en señalar a cualquier persona que leyera esta pregunta que el desbordamiento de configuración: oculto (o desbordamiento-y) en el elemento del cuerpo no ocultaba las barras de desplazamiento para mí. Tuve que usar el elemento HTML.

Además de la respuesta de Peter:

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

Esto funcionará igual para IE10:

  #element { -ms-overflow-style: none; } 

Si desea que el desplazamiento funcione, antes de ocultar las barras de desplazamiento, considere diseñarlas. Las versiones modernas de OS X y SO móvil tienen barras de desplazamiento que, aunque poco prácticas para agarrar con un mouse, son bastante bellas y neutrales.

Para ocultar las barras de desplazamiento, una técnica de John Kurlak funciona bien, excepto para dejar a los usuarios de Firefox que no tienen paneles táctiles sin forma de desplazarse a menos que tengan un mouse con una rueda, lo que probablemente hacen, pero incluso entonces solo pueden desplazarse verticalmente .

La técnica de John usa tres elementos:

  • Un elemento externo para enmascarar las barras de desplazamiento.
  • Un elemento intermedio para tener las barras de desplazamiento.
  • Y un elemento de contenido para establecer el tamaño del elemento medio y hacer que tenga barras de desplazamiento.

Debe ser posible establecer el tamaño de los elementos externos y de contenido de la misma manera que elimina el uso de porcentajes, pero no puedo pensar en otra cosa que no funcione con el ajuste correcto.

Mi mayor preocupación es si todas las versiones de navegadores establecen barras de desplazamiento para hacer visible el contenido desbordado visible. He probado en los navegadores actuales, pero no en los más antiguos.

Perdón mi SASS ; P

 %size { // set width and height } .outer { // mask scrollbars of child overflow: hidden; // set mask size @extend %size; // has absolutely positioned child position: relative; } .middle { // always have scrollbars. // don't use auto, it leaves vertical scrollbar showing overflow: scroll; // without absolute, the vertical scrollbar shows position: absolute; } // prevent text selection from revealing scrollbar, which it only does on // some webkit based browsers. .middle::-webkit-scrollbar { display: none; } .content { // push scrollbars behind mask @extend %size; } 

Pruebas

OS X es 10.6.8. Windows es Windows 7.

  • Firefox 32.0 Scrollbars hidden. Las teclas de flecha no se desplazan, incluso después de hacer clic para enfocar, pero la rueda del mouse y los dos dedos en el panel táctil sí lo hacen. OS X y Windows.
  • Chrome 37.0 Scrollbars hidden. Las teclas de flecha funcionan después de hacer clic para enfocar. Trabajo con la rueda del mouse y el trackpad. OS X y Windows.
  • Barras de desplazamiento de Internet Explorer 11 ocultas. Las teclas de flecha funcionan después de hacer clic para enfocar. La rueda del mouse funciona. Windows.
  • Safari 5.1.10 barras de desplazamiento ocultas. Las teclas de flecha funcionan después de hacer clic para enfocar. Trabajo con la rueda del mouse y el trackpad. OS X.
  • Android 4.4.4 y 4.1.2. Barras de desplazamiento ocultas. Touch scrolling funciona Intentó en Chrome 37.0, Firefox 32.0 y HTMLViewer en 4.4.4 (sea lo que sea). En HTMLViewer, la página tiene el tamaño del contenido enmascarado y también se puede desplazar. El desplazamiento interactúa de forma aceptable con el zoom de página.

mi html es así

 

agrega esto a tu div donde quieras esconder la barra de desplazamiento

 .content { position: absolute; right: -100px; overflow-y: auto; overflow-x: hidden; height: 75%; /*this can be any value of your choice*/ } 

y agregar esto al contenedor

 .container { overflow-x: hidden; max-height: 100%; max-width: 100%; } 

Mi respuesta se desplazará incluso cuando el overflow:hidden; usando jquery

por ejemplo, desplazarse horizontalmente con la rueda del mouse:

    

Escribí una versión de webkit con algunas opciones como auto hide , pequeña versión , scroll only-y o only-x

 ._scrollable{ @size: 15px; @little_version_ratio: 2; @scrollbar-bg-color: rgba(0,0,0,0.15); @scrollbar-handler-color: rgba(0,0,0,0.15); @scrollbar-handler-color-hover: rgba(0,0,0,0.3); @scrollbar-coner-color: rgba(0,0,0,0); overflow-y: scroll; overflow-x: scroll; -webkit-overflow-scrolling: touch; width: 100%; height: 100%; &::-webkit-scrollbar { background: none; width: @size; height: @size; } &::-webkit-scrollbar-track { background-color:@scrollbar-bg-color; border-radius: @size; } &::-webkit-scrollbar-thumb { border-radius: @size; background-color:@scrollbar-handler-color; &:hover{ background-color:@scrollbar-handler-color-hover; } } &::-webkit-scrollbar-corner { background-color: @scrollbar-coner-color; } &.little{ &::-webkit-scrollbar { background: none; width: @size / @little_version_ratio; height: @size / @little_version_ratio; } &::-webkit-scrollbar-track { border-radius: @size / @little_version_ratio; } &::-webkit-scrollbar-thumb { border-radius: @size / @little_version_ratio; } } &.autoHideScrollbar{ overflow-x: hidden; overflow-y: hidden; &:hover{ overflow-y: scroll; overflow-x: scroll; -webkit-overflow-scrolling: touch; &.only-y{ overflow-y: scroll !important; overflow-x: hidden !important; } &.only-x{ overflow-x: scroll !important; overflow-y: hidden !important; } } } &.only-y:not(.autoHideScrollbar){ overflow-y: scroll !important; overflow-x: hidden !important; } &.only-x:not(.autoHideScrollbar){ overflow-x: scroll !important; overflow-y: hidden !important; } } 

http://codepen.io/hicTech/pen/KmKrjb

Creo que puedes manipularlo con el atributo CSS de desbordamiento, pero tienen compatibilidad limitada con el navegador. Una fuente dijo que era IE5 +, Firefox 1.5+ y Safari 3+, tal vez lo suficiente para sus propósitos.

Este enlace tiene una buena discusión: http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/

Para desactivar la barra de desplazamiento vertical simplemente agregue: overflow-y:hidden;

Encontrar más sobre: desbordamiento

Intereting Posts