que personalizar pero ocultar funcione desplazamiento deshabilitarlo chrome barra css browser scrollbar

css - personalizar - ocultar scroll pero que funcione



Ocultar la barra de desplazamiento en una página HTML (18)

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

Sí, una especie de ...

Cuando haga la pregunta, "¿Se pueden eliminar las barras de desplazamiento de un navegador de alguna manera, en lugar de simplemente ocultar o camuflar", todos dirán "No es posible" porque no es posible eliminar las barras de desplazamiento de todos los navegadores en una De manera 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 debemos sustituir de forma proactiva 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 no es posible) podemos evitar el desplazamiento (perfectamente posible) y desplazarnos dentro de los elementos que creamos y tener más control sobre ellos.

Crea un div con desbordamiento oculto. Detecta cuándo el usuario intenta desplazarse pero no puede hacerlo porque hemos inhabilitado la capacidad de los navegadores para desplazarse con el desbordamiento: oculto ... y en su lugar, movemos el contenido hacia arriba utilizando Javascript cuando esto ocurre. De este modo, creamos nuestro propio desplazamiento sin el desplazamiento predeterminado de los navegadores o usamos un complemento como iScroll

---

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

Internet Explorer 5.5+

* Estas propiedades nunca formaron parte de la especificación 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 encuentra 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 eran prefijadas por el proveedor de Microsoft, pero W3C nunca las aprobó.

-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 pone a disposición el scroll que establece si se deshabilitan o 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 versiones posteriores, cuando usa 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 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 el marco de presentación es responsable de representar 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 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 */

Estos pueden combinarse con pseudo-selectores adicionales:

  • :horizontal : la pseudo-clase horizontal se aplica a las piezas de la barra de desplazamiento que tienen 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 : el decremento de la pseudo-clase se aplica a los botones y piezas de seguimiento. Indica si el botón o la pieza de pista disminuirá la posición de la vista cuando se utilice (por ejemplo, hacia arriba en una barra de desplazamiento vertical, a la izquierda en una barra de desplazamiento horizontal).
  • :increment : el incremento de pseudo-clase se aplica a los botones y piezas de seguimiento. Indica si un botón o pieza de pista incrementará 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 : la pseudo-clase de inicio se aplica a los botones y piezas de pista. Indica si el objeto se coloca antes del pulgar.
  • :end : la pseudo-clase final se aplica a los botones y pistas. Indica si el objeto se coloca después del pulgar.
  • :double-button : la pseudo-clase de doble botón se aplica a los botones y piezas de pista. Se utiliza 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 pista se apoya en un par de botones.
  • :single-button : la pseudo-clase de un solo botón se aplica a los 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 se apoya en un botón de 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 una esquina de la barra de desplazamiento está 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 noches recientes, esta pseudo-clase ahora también se aplica a :: selección. Planeamos extenderlo para que funcione con cualquier contenido y proponerlo 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 */ }

Más detalles sobre Chrome

addWindowScrollHandler
Public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler handler)

Agrega un controlador Window.ScrollEvent
Parámetros:
manejador - el manejador
Devoluciones:
devuelve el registro del manejador
[ 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 no usarlas.

  • -moz-scrollbars-none Recomiendan usar desbordamiento: oculto 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 desactiva el uso de las teclas de flecha y la rueda del mouse para desplazarse por las páginas web.

  • Mozilla Developer Docs en ''Desbordamiento''

Más detalles sobre Mozilla

Por lo que sé, esto no es realmente útil, 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 la 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é.

Diverso

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

El objeto BarProp de la scrollbar es un elemento secundario del objeto de window 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 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 la 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 scrollrestoration o cambiar su estado (appending ="auto"/"manual" . Auto es el valor predeterminado. Cambiarlo a manual significa que usted como desarrollador tomará posesión de cualquiera cambios de desplazamiento que pueden ser necesarios cuando un usuario recorre el historial de la aplicación. Si es necesario, puede hacer un seguimiento de la posición de desplazamiento mientras empuja las entradas del historial con history.pushState ().

---

Otras lecturas:

Ejemplos

Además de la respuesta de Pedro:

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

Esto funcionará igual para IE10:

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

Creo que encontré una solución 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;}

Escribí una versión de webkit con algunas opciones como ocultación automática , versión pequeña , 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

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

por ejemplo, desplácese horizontalmente con la rueda del ratón:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type=''text/javascript'' src=''/js/jquery.mousewheel.min.js''></script> <script type="text/javascript"> $(function() { $("YourSelector").mousewheel(function(event, delta) { this.scrollLeft -= (delta * 30); event.preventDefault(); }); }); </script>

Para completar, esto funciona para webkit:

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

Si desea ocultar todas las barras de desplazamiento, utilice

::-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 puede usar width: 0 , que puede restaurarse fácilmente con width: auto , pero no soy un fanático del width abusivo para los ajustes de visibilidad.

Para ver si su navegador actual lo admite, intente 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).

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

Encuentre más sobre: overflow

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

Para eliminar la barra de desplazamiento del div interno, puede sacarla de la ventana gráfica del div externo aplicando un margen negativo al div interno. Luego aplique un relleno igual al div interno para que el contenido se mantenga 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; }

Puede usar el overflow propiedades CSS y el -ms-overflow-style con una combinación de ::-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, la -moz-scrollbars-none está en desuso ( enlace ).

Si desea que el desplazamiento funcione, antes de ocultar las barras de desplazamiento, considere diseñarlas. Las versiones modernas de OS X y los sistemas operativos móviles tienen barras de desplazamiento que, aunque no son prácticas para agarrar con un mouse, son bastante hermosas 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 touchpads sin posibilidad de desplazarse a menos que tengan un ratón con una rueda, lo que probablemente sí tienen, pero incluso en ese caso solo pueden desplazarse verticalmente. .

La técnica de John utiliza tres elementos:

  • Un elemento exterior 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 central y hacer que tenga barras de desplazamiento.

Debe ser posible establecer el tamaño de los elementos externos y de contenido del mismo modo, lo que elimina el uso de porcentajes, pero no puedo pensar en otra cosa que no funcione con los ajustes correctos.

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

Perdona 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 ocultos. Las teclas de flecha no se desplazan, incluso después de hacer clic para enfocar, pero la rueda del ratón y dos dedos en el trackpad sí. OS X y Windows.
  • Chrome 37.0 Scrollbars ocultos. Las teclas de flecha funcionan después de hacer clic para enfocar. La rueda del ratón y el trackpad funcionan. OS X y Windows.
  • Internet Explorer 11 barras de desplazamiento ocultas. Las teclas de flecha funcionan después de hacer clic para enfocar. La rueda del ratón funciona. Windows
  • Safari 5.1.10 Barras de desplazamiento ocultas. Las teclas de flecha funcionan después de hacer clic para enfocar. La rueda del ratón y el trackpad funcionan. OS X.
  • Android 4.4.4 y 4.1.2. Barras de desplazamiento ocultas. Toque de desplazamiento funciona. Probado 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 manera aceptable con el zoom de la página.

Si estás buscando una solución para ocultar una barra de desplazamiento para dispositivos móviles, ¡sigue 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 (tanto en el navegador nativo como en Chrome) y en un iPad con iOS 6 (en Safari y Chrome).

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

mi html es asi

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

agrega esto a tu div donde quieras ocultar 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%; }

Enfoque de navegador cruzado para ocultar la barra de desplazamiento.

Edge probado, Chrome, Firefox, Safari

¡Oculta la barra de desplazamiento mientras aún puedes desplazarte con la rueda del ratón! 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; }

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

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

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

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

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

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

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

actualización: quise decir oculto, lo siento, acabo de despertar :-)

Nota: También deshabilitará la función de desplazamiento. Consulte las siguientes respuestas si solo desea ocultar la barra de desplazamiento pero no la función de desplazamiento.