En IE10, la barra de desplazamiento no siempre está ahí ... y cuando aparece aparece como una superposición ... Es una característica genial, pero me gustaría desactivarla para mi sitio web específico, ya que es una aplicación de pantalla completa y mis logotipos y menús se pierden detrás.
IE10:
CROMO:
¿Alguien sabe una manera de tener siempre la barra de desplazamiento fija en posición en IE10?
overflow-y: scroll no parece funcionar! simplemente lo coloca permanentemente sobre mi sitio web.
Puede ser bootstrap causando el problema, ¡pero qué parte no tengo idea! ver ejemplo aquí: http://twitter.github.io/bootstrap/
Respuestas
155 para la respuesta № 1Después de buscar en Google un poco, me topé con esto; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom donde un comentario dejado por "Blue Ink" dice:
Al inspeccionar las páginas, logré reproducirlo usando:
@ -ms-viewport {ancho: ancho del dispositivo; }
lo 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:
desbordamiento-y: auto;
hace que las barras de desplazamiento se oculten automáticamente
Y en archivo bootstraps responsive-utilities.less, línea 21 puedes 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 enumerados en el código comentado anteriormente. (Se agregaron después de que inicialmente publiqué esta respuesta).
170 para la respuesta № 2
Como xec mencionó 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 clásicotipo barra de desplazamiento controlar cuándo se desborda su contenido. A diferencia de -ms-autohiding-scrollbar, barras de desplazamiento en elementos con la propiedad -ms-overflow-style establecida en la barra de desplazamiento siempre aparece en la pantalla y no se desvanece cuando El elemento está inactivo. Las barras de desplazamiento no superponen contenido y, por lo tanto, ocupar espacio de diseño adicional a lo largo de los bordes del elemento donde Aparecer.
9 para la respuesta № 3
SOLUCIÓN: Dos pasos: detectar si IE10, luego usar CSS:
haz esto en init:
if (/msies10.0/gi.test(navigator.appVersion)) {
$("body").addClass("IE10");
}
Añade este CSS:
body.IE10 {
overflow-y: scroll;
-ms-overflow-style: scrollbar;
}
Por qué funciona:
- los
overflow-y:scrollenciende permanentemente el<body>etiqueta barra de desplazamiento vertical. - los
-ms-overflow-style:scrollbarapaga el comportamiento de ocultación automática, empujando así el contenido y dándonos el comportamiento de diseño de la barra de desplazamiento al que estamos acostumbrados.
5 para la respuesta № 4
Prueba esto
body{-ms-overflow-style: scrollbar !important;}
-4 para la respuesta № 5
Probado el @ -ms-viewport y otras sugerencias pero ninguna funcionó en mi casocon IE11 en Windows 7. No tenía barras de desplazamiento y las otras publicaciones aquí a lo sumo me darían una barra de desplazamiento que no se desplazaba a ningún lado a pesar de que había mucho 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í.