Scrollbar overlay en IE10, ¿ cómo detener eso?

En IE10, la barra de desplazamiento no siempre está allí... 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 de ella.

IE10:

introduzca la descripción de la imagen aquí

CROMO:

introduzca la descripción de la imagen aquí

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

Overflow-y: scroll no parece funcionar! simplemente lo pone permanentemente en mi sitio web.

Puede ser bootstrap causando el problema, pero que parte no tengo idea! ver ejemplo aquí: http://twitter.github.io/bootstrap/

Author: xec, 2013-06-11
Source

6 answers

Después de googlear 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 "Tinta Azul" dice:

Inspeccionando las páginas, logré reproducirlas 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, añadiendo:

Overflow-y: auto;

Hace que las barras de desplazamiento se oculten automáticamente

Y en bootstraps responsive-utilities.less file, line 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 enumerados en el código comentado anteriormente. (Se agregaron después de que inicialmente publicara esta respuesta.)

 157
Author: xec,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-19 07:44:26

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, dependemos de la configuración @-ms-viewport para el diseño web adaptable).

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

Establecer el estilo a barra de desplazamiento para recuperar las barras de desplazamiento:

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

Barra de desplazamiento

Indica que el elemento muestra un tipo de barra de desplazamiento clásico controla cuando su contenido se desborda. A diferencia de ms-ocultación automática-barra de desplazamiento, 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 el elemento está inactivo. Las barras de desplazamiento no superponen contenido, y por lo tanto ocupar espacio adicional de diseño a lo largo de los bordes de la elemento donde se aparecer.

 174
Author: stefan.s,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-20 07:18:42

SOLUCIÓN: Dos pasos - detectar si IE10, a continuación, utilizar CSS:

Haga esto en init: 

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

Añadir 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 -ms-overflow-style:scrollbar desactiva 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 todos estamos acostumbrados.
 9
Author: gdibble,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-08 01:29:27

Prueba esto

body{-ms-overflow-style: scrollbar !important;}
 5
Author: user2606817,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-23 13:00:48

Este problema también ocurre con las tablas de datos en Bootstrap 4. Mi solución fue:

  1. Comprobado si el navegador ie se está abriendo.
  2. Se reemplazó la clase table-responsive por la clase table-responsive-ie.

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');
        }
 0
Author: Primoshenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-18 12:58:31

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 daban una barra de desplazamiento que no se desplazaba a ninguna parte a pesar de que había mucho contenido. Encontrado 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 por mí.

 -4
Author: Toadmyster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-23 22:54:01