Come posso evitare che la barra di scorrimento si sovrapponga al contenuto in IE10?

In IE10, la barra di scorrimento non è sempre presente ... e quando appare si accende come overlay ... È una funzionalità interessante ma vorrei disattivarla per il mio sito Web specifico in quanto è un'applicazione a schermo intero e il mio loghi e menu si perdono dietro di esso.

IE10:

CROMO:

Qualcuno conosce un modo per avere sempre la barra di scorrimento fissata in posizione su IE10?

overflow-y: scroll non sembra funzionare! lo mette permanentemente sul mio sito web.

Potrebbe essere il bootstrap a causare il problema, ma quale parte non ho idea! vedi esempio qui: http://twitter.github.io/bootstrap/

Dopo aver cercato su Google un po 'mi sono imbattuto in una discussione in cui un commento lasciato da "Blue Ink" afferma:

Ispezionando le pagine, sono riuscito a riprodurlo utilizzando:

@ -ms-viewport {larghezza: larghezza dispositivo; }

che fa diventare trasparenti le barre di scorrimento. Ha senso, poiché il contenuto ora occupa l'intero schermo.

In questo scenario, aggiungendo:

overflow-y: auto;

fa nascondere automaticamente le barre di scorrimento

E nel file bootstraps responsive-utilities.less, riga 21 puoi trovare il seguente codice 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;
}

Questo frammento è ciò che sta causando il comportamento. Consiglio di leggere i link elencati nel codice commentato sopra. (Sono stati aggiunti dopo che inizialmente ho pubblicato questa risposta.)

Come xec menzionato nella sua risposta, questo comportamento è causato dall'impostazione @ -ms-viewport.

La buona notizia è che non è necessario rimuovere questa impostazione per ripristinare le barre di scorrimento (nel nostro caso ci affidiamo all'impostazione @ -ms-viewport per un design web reattivo).

Puoi usare lo stile -ms-overflow per definire il comportamento dell'overflow, come menzionato in questo articolo:

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

Imposta lo stile sulla barra di scorrimento per ripristinare le barre di scorrimento:

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

barra di scorrimento

Indica che l'elemento visualizza un controllo di tipo barra di scorrimento classico quando il suo contenuto trabocca. A differenza di -ms-autohiding-scrollbar, le barre di scorrimento sugli elementi con la proprietà -ms-overflow-style impostata su scrollbar appaiono sempre sullo schermo e non si sbiadiscono quando l'elemento è inattivo. Le barre di scorrimento non sovrappongono il contenuto e pertanto occupano spazio di layout aggiuntivo lungo i bordi dell'elemento in cui vengono visualizzati.

SOLUZIONE: due passaggi: rileva se IE10, quindi utilizza CSS:

fallo su 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

Aggiungi questo CSS:

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

Perché funziona:

• La overflow-y:scrolltrasforma in modo permanente sulla <body>barra di scorrimento verticale tag.
• I -ms-overflow-style:scrollbarspegne il comportamento auto-nascondere, spingendo così il contenuto sopra e dandoci il comportamento di layout barra di scorrimento che siamo tutti abituati.

Aggiornato per gli utenti che chiedono informazioni su IE11. - Riferimento https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Prova questo

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

Questo problema si verifica anche con Datatables su Bootstrap 4. La soluzione Mi era:

1. Controllato se il browser ie si sta aprendo.
2. Sostituita la classe table-responsive per la classe 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');
        }  

Ho provato @ -ms-viewport e altri suggerimenti, ma nessuno ha funzionato nel mio caso con IE11 su Windows 7. Non avevo barre di scorrimento e gli altri post qui al massimo mi avrebbero dato una barra di scorrimento che non scorreva da nessuna parte anche se c'era un sacco di contenuti. Ho trovato questo articolo http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ che è stato ridotto a. . .

body { overflow-x: visible; }

. . . e ha fatto il trucco per me.