html - personalizar - para que sirve la barra de desplazamiento

Superposición de barras de desplazamiento en IE10, ¿cómo se detiene eso?

Question

En IE10, la barra de desplazamiento no siempre está allí ... y cuando aparece, aparece como una superposición ... Es una característica interesante, pero me gustaría desactivarla para mi sitio web específico, ya que es una aplicación de pantalla completa y mi logotipos y menús se pierden detrás de él.

IE10:

CROMO:

¿Alguien sabe una forma de tener siempre la barra de desplazamiento fija en su posición en IE10?

overflow-y: ¡scroll no parece funcionar! simplemente lo coloca permanentemente sobre mi sitio web.

Puede ser el arranque que causa el problema, pero en qué parte no tengo ni idea. ver ejemplo aquí: http://twitter.github.io/bootstrap/

Answer 1

Como se menciona xec en su respuesta, este comportamiento es causado por la configuración @ -ms-viewport.

La buena noticia es que no tiene que eliminar esta configuración para recuperar las barras de desplazamiento (en nuestro caso confiamos en la configuración @ -ms-viewport para un diseño web receptivo).

Puede usar el estilo -ms-overflow para definir el comportamiento de desbordamiento, como se menciona en este artículo:

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

Establezca el estilo en la barra de desplazamiento para recuperar las barras de desplazamiento:

body {
    -ms-overflow-style: scrollbar;
}

barra de desplazamiento

Indica que el elemento muestra un control clásico tipo barra de desplazamiento cuando su contenido se desborda. A diferencia de -ms-autohiding-scrollbar, las barras de desplazamiento en elementos con la propiedad -ms-overflow-style configurada en barra de desplazamiento siempre aparecen en la pantalla y no se desvanecen cuando el elemento está inactivo. Las barras de desplazamiento no superponen el contenido y, por lo tanto, ocupan espacio de diseño adicional a lo largo de los bordes del elemento donde aparecen.

Answer 2

Después de googlear un poco, me encontré con esto; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom donde un comentario dejado por "Blue Ink" indica:

Inspeccionando las páginas, logré reproducirlo usando:

@ -ms-viewport {width: device-width; }

que hace que las barras de desplazamiento se vuelvan transparentes. Tiene sentido, ya que el contenido ahora ocupa toda la pantalla.

En este escenario, agregando:

overflow-y: auto;

hace que las barras de desplazamiento se oculten automáticamente

Y en el archivo bootstraps responsive-utilities.less, línea 21 , puede encontrar el siguiente código CSS

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

Este fragmento es lo que está causando el comportamiento. Recomiendo leer los enlaces que figuran en el código comentado más arriba. (Se agregaron después de que inicialmente publiqué esta respuesta).

Answer 3

Probé la @ -ms-viewport y otras sugerencias, pero ninguna funcionó en mi caso con IE11 en Windows 7. No tenía barras de desplazamiento y las otras publicaciones aquí, a lo sumo, me daban una barra de desplazamiento que no se desplazaba a ninguna parte aunque hubiera un montón de contenido. Encontré este artículo http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ que se redujo a. . .

body { overflow-x: visible; }

. . . e hizo el truco para mí.

Answer 4

Prueba esto

body{-ms-overflow-style: scrollbar !important;}

Answer 5

SOLUCIÓN: dos pasos: detectar si es IE10, luego usar CSS:

haz esto en init:

if (/msie/s10/.0/gi.test(navigator.appVersion)) {
    $(''body'').addClass(''IE10'');
}

Agrega este CSS:

body.IE10 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

Por qué funciona:

• El overflow-y:scroll activa permanentemente la barra de desplazamiento vertical de la etiqueta <body> .
• El estilo -ms-overflow-style:scrollbar desactiva el comportamiento de ocultación automática, lo que empuja el contenido y nos da el comportamiento de diseño de la barra de desplazamiento que todos estamos acostumbrados.