¿Cómo puedo evitar que la barra de desplazamiento superponga contenido en IE10?


183

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 mi logotipos y menús se pierden detrás de él.

IE10:

ingrese la descripción de la imagen aquí

CROMO:

ingrese la descripción de la imagen aquí

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

overflow-y: el desplazamiento 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/


Mi IE10 no tiene este comportamiento, ¿lo está ejecutando como una aplicación "Metro"?
xec

No, no lo soy. Estoy en Windows 8, si eso hace alguna diferencia. También es lo mismo en mi computadora portátil ... Puede que no note este comportamiento de la barra de desplazamiento porque otros sitios web como stackoverflow, por ejemplo, han encontrado una forma de evitarlo ... Espero que la nueva imagen ayude a distinguir la diferencia entre lo que hago y lo que no. querer
Jimmyt1988

¿Tiene algo que ver con un ancho establecido de la página?
Albzi

Establecer el ancho de la página funcionaría ... por desgracia, me preguntaba si hay una forma de navegador cruzado. Teniendo en cuenta que Firefox, Safari y Chrome no tienen este comportamiento. Podría usar un doo-raggy específico de IE10, supongo ... simplemente no parece la respuesta más elegante.
Jimmyt1988

@JamesT También estoy en w8, pero no puedo encontrar ninguna página que haga que IE10 represente la barra de desplazamiento como una superposición (ni siquiera mi página de prueba, www.arngren.net)
xec

Respuestas:


163

Después de buscar en Google un poco, me topé con una discusión 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 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 anteriormente. (Se agregaron después de que inicialmente publiqué esta respuesta).


74
¡Usted, señor, es un caballero y un erudito! Coloqué @ -ms-viewport {ancho: automático! Importante; } en mi archivo CSS y el problema fue: D
Jimmyt1988

44
gran respuesta, recomendaría a otros que lean el artículo al que se hace referencia en el comentario de bootstrap: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design : eliminar ese código de bootstrap podría romper la capacidad de respuesta de IE10 en Metro de Windows 8
tmsimont

@tmsimont Buen punto. Además, parecen haber cambiado el comentario en el último archivo fuente de Boostrap (actualicé mi respuesta con los nuevos comentarios), que ahora menciona el uso de un script de rastreo UA para aplicar esto a " solo Windows 8 de Surface / escritorio" - verifique fuera del enlace del problema github.com/twbs/bootstrap/issues/10497
xec

1
Realmente me gusta bootstrap, pero desearía que separaran las opciones de medios y vistas en un archivo diferente. Estaba construyendo un sitio web receptivo por primera vez y, literalmente, tuve que ir y quitar un montón de cosas de bootstrap para que mi sitio funcionara como quería.
David

9
-ms-overflow-style: barra de desplazamiento; parece ser la solución más limpia (ver segunda respuesta).
Manuel Arwed Schmidt el

179

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 -ms-overflow-style 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 de tipo barra de desplazamiento cuando se desborda su contenido. A diferencia de -ms-autohiding-scrollbar, las barras de desplazamiento en elementos con la propiedad -ms-overflow-style establecida en scrollbar siempre aparecen en la pantalla y no se desvanecen cuando el elemento está inactivo. Las barras de desplazamiento no superponen contenido y, por lo tanto, ocupan espacio de diseño adicional a lo largo de los bordes del elemento donde aparecen.


9
Agregué esto en el elemento html, es decir, html{-ms-overflow-style: scrollbar;}y funcionó para mí. ¿Habría casos de uso donde esto fuera necesario en otro lugar?
nHaskins

77
body{-ms-overflow-style: scrollbar;}funciona bien para mí .. Gracias
Manjit Singh

15
Esta debería ser la respuesta. El aceptado elimina la adaptación del dispositivo de ventana gráfica.
mes

agrega desbordamiento en la x
Monicka

1
@ stefan.s esta es la respuesta correcta! Debe ser aceptado
eirenaios

12

SOLUCIÓN: Dos pasos: detecte si IE10, luego use CSS:

haz esto en init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

Agregue este CSS:

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

Por qué funciona

  • Activa overflow-y:scrollpermanentemente la <body>barra de desplazamiento vertical de la etiqueta.
  • los -ms-overflow-style:scrollbar apaga el comportamiento de auto-ocultar, empujando así el contenido una y que nos da el comportamiento de diseño de barra de desplazamiento todo lo que estamos acostumbrados.

Actualizado para usuarios que preguntan sobre IE11. - Referencia https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)


14
¿por qué no solo harías body {-ms-overflow-style: scrollbar; }?
Scott Romack

77
-1 Su código no funciona en IE11 y no lo hará en IE12 cuando se publique. Hay mejores formas de hacer estilos específicos de IE.
Joseph Lennox

1
@JosephLennox Si pudiera agregar una respuesta para indicar una mejor manera de hacer estilos específicos de IE, estoy seguro de que tanto gdibble como otras personas que se acerquen a esta pregunta lo agradecerían.
Compilador conspicuo

2
@ConspicuousCompiler El prefijo "-ms-" ya lo hace adecuadamente solo IE.
Joseph Lennox

55
Esto es como la respuesta de @ stefan.s, pero con hinchazón innecesaria.
Ry-


0

Este problema también está sucediendo con Datatables en Bootstrap 4. Mi solución fue:

  1. Se verificó si el navegador ie se está abriendo.
  2. Se reemplazó la clase sensible a la tabla por la clase sensible a la tabla.

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }  

-4

Probé el @ -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 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í.


2
La pregunta no es sobre las barras de desplazamiento faltantes, sino sobre la superposición de barras de desplazamiento semitransparente introducida como un efecto secundario cuando se usa bootstrap. También puedes intentarlobody { overflow: auto; }
xec
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.