Comment puis-je empêcher la superposition de contenu de la barre de défilement dans IE10?

Dans IE10, la barre de défilement n'est pas toujours là ... et quand elle apparaît, elle s'allume en superposition ... C'est une fonctionnalité intéressante mais je voudrais la désactiver pour mon site Web spécifique car il s'agit d'une application plein écran et de mon les logos et les menus sont perdus derrière lui.

IE10:

CHROME:

Quelqu'un connaît-il un moyen de toujours avoir la barre de défilement fixée en position sur IE10?

overflow-y: le scroll ne semble pas fonctionner! il le met juste en permanence sur mon site Web.

C'est peut-être le bootstrap qui cause le problème, mais je n'ai aucune idée de la partie! voir l'exemple ici: http://twitter.github.io/bootstrap/

Après avoir cherché un peu sur Google, je suis tombé sur une discussion où un commentaire laissé par "Blue Ink" déclare:

En inspectant les pages, j'ai réussi à le reproduire en utilisant:

@ -ms-viewport {largeur: largeur de l'appareil; }

ce qui rend les barres de défilement transparentes. Cela a du sens, puisque le contenu occupe désormais tout l'écran.

Dans ce scénario, ajouter:

débordement-y: auto;

rend les barres de défilement masquées automatiquement

Et dans le fichier bootstraps responsive-utilities.less, ligne 21, vous pouvez trouver le code CSS suivant

// 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;
}

Cet extrait de code est à l'origine du comportement. Je recommande de lire les liens répertoriés dans le code commenté ci-dessus. (Ils ont été ajoutés après avoir initialement publié cette réponse.)

Comme xec l'a mentionné dans sa réponse, ce comportement est causé par le paramètre @ -ms-viewport.

La bonne nouvelle est que vous n'avez pas à supprimer ce paramètre pour récupérer les barres de défilement (dans notre cas, nous nous appuyons sur le paramètre @ -ms-viewport pour une conception Web réactive).

Vous pouvez utiliser le style -ms-overflow-style pour définir le comportement de débordement, comme mentionné dans cet article:

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

Définissez le style sur scrollbar pour récupérer les barres de défilement:

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

barre de défilement

Indique que l'élément affiche un contrôle de type barre de défilement classique lorsque son contenu déborde. Contrairement à -ms-autohiding-scrollbar, les barres de défilement des éléments dont la propriété -ms-overflow-style est définie sur scrollbar apparaissent toujours à l'écran et ne disparaissent pas lorsque l'élément est inactif. Les barres de défilement ne superposent pas le contenu et occupent donc un espace de mise en page supplémentaire le long des bords de l'élément où elles apparaissent.

SOLUTION: Deux étapes - détecter si IE10, puis utiliser CSS:

faites ceci sur 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

Ajoutez ce CSS:

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

Pourquoi ça marche:

• Le overflow-y:scrollactive en permanence la <body>barre de défilement verticale de la balise.
• Le -ms-overflow-style:scrollbardésactive le comportement de masquage automatique, poussant ainsi le contenu et nous donnant le comportement de disposition de la barre de défilement auquel nous sommes tous habitués.

Mis à jour pour les utilisateurs posant des questions sur IE11. - Référence https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Essaye ça

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

Ce problème se produit également avec Datatables sur Bootstrap 4. La solution Mi était:

1. Vérifié si le navigateur ie s'ouvre.
2. Remplacement de la classe sensible à la table pour la classe sensible à la table.

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

J'ai essayé le @ -ms-viewport et d'autres suggestions, mais aucune n'a fonctionné dans mon cas avec IE11 sur Windows 7. Je n'avais pas de barre de défilement et les autres messages ici me donneraient tout au plus une barre de défilement qui ne défilait nulle part même s'il y avait beaucoup de contenu. J'ai trouvé cet article http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ qui s'est réduit à. . .

body { overflow-x: visible; }

. . . et a fait l'affaire pour moi.