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

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:

CROMO:

¿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/

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).

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.

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)

Prueba esto

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

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

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í.