web-dev-qa-db-fra.com

Superposition de la barre de défilement dans IE10, comment arrêtez-vous cela?

Dans IE10, la barre de défilement n’est pas toujours là ... et quand elle apparaît, elle s’affiche 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 les logos et les menus sont perdus derrière.

IE10:

enter image description here

CHROME:

enter image description here

Quelqu'un sait-il qu'il est toujours possible de positionner la barre de défilement sur IE10?

overflow-y: le défilement ne semble pas fonctionner! il suffit de le mettre en permanence sur mon site.

C'est peut-être l'amorçage qui cause le problème mais quelle partie je n'en ai aucune idée! voir exemple ici: http://Twitter.github.io/bootstrap/

htmlcsstwitter-bootstrapscrollbarinternet-explorer-10
180
Jimmyt1988

Après avoir googlé un peu, je suis tombé sur ceci; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom où un commentaire laissé par "Blue Ink" déclare:

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

@ -ms-viewport {width: device-width; }

qui fait que les barres de défilement deviennent transparentes. Cela a du sens, depuis le contenu occupe maintenant tout l'écran.

Dans ce scénario, ajouter:

débordement-y: auto;

fait que les barres de défilement se cachent 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;
}

Ce fragment est la cause du comportement. Je recommande de lire les liens énumérés dans le code commenté ci-dessus. (Ils ont été ajoutés après que j'ai posté cette réponse.)

157
xec

Comme xec l'a mentionné dans sa réponse, ce comportement est dû au paramètre @ -ms-viewport.

La bonne nouvelle est qu'il n'est pas nécessaire de 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 pour définir le comportement de débordement, comme indiqué dans cet article:

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

Définissez le style sur barre de défilement pour obtenir les barres de défilement:

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

barre de défilement 

Indique que l'élément affiche un type de barre de défilement classique contrôler quand son contenu déborde. Contrairement à -ms-autohiding-scrollbar, barres de défilement sur les éléments avec la propriété -ms-overflow-style définie sur La barre de défilement apparaît toujours à l'écran et ne disparaît pas lorsque le l'élément est inactif. Les barres de défilement ne superposent pas le contenu, et par conséquent occuper plus d'espace de mise en page sur les bords de l'élément où ils apparaître.

175
stefan.s

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

Ajouter ce CSS:

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

Pourquoi ça marche:

  • Le overflow-y:scroll active en permanence la barre de défilement verticale de la balise <body>.
  • Le -ms-overflow-style:scrollbar désactive le comportement de masquage automatique, ce qui permet de déplacer le contenu et de nous donner le comportement de présentation de la barre de défilement auquel nous sommes tous habitués.

Mise à 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)

9
gdibble

Essaye ça

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

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

  1. Vérifié si le navigateur ie est en train de s'ouvrir. 
  2. Classe remplacée par la table remplacée par la classe répondant à 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');
        }
0
Primoshenko