it-swarm.com.de

Scrollbar-Overlay in IE10, wie können Sie damit aufhören?

In IE10 ist die Bildlaufleiste nicht immer vorhanden ... und wenn sie angezeigt wird, erscheint sie als Überlagerung. Es ist eine coole Funktion, aber ich möchte sie für meine spezifische Website ausschalten, da sie eine Vollbildanwendung ist und meine Logos und Menüs gehen dahinter verloren.

IE10:

enter image description here

CHROM:

enter image description here

Kennt jemand eine Möglichkeit, die Bildlaufleiste immer auf dem IE10 zu fixieren?

overflow-y: Scroll scheint nicht zu funktionieren! es legt es einfach permanent über meine Website.

Möglicherweise ist Bootstrap das Problem, aber welchen Teil habe ich keine Ahnung! Siehe Beispiel hier: http://Twitter.github.io/bootstrap/

180
Jimmyt1988

Nachdem ich ein bisschen gegoogelt hatte, stolperte ich darüber. http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom wobei ein Kommentar von "Blue Ink" lautet:

Bei der Durchsicht der Seiten gelang es mir, sie zu reproduzieren, indem ich Folgendes verwendete:

@ -ms-viewport {width: Gerätebreite; }

dadurch werden die Bildlaufleisten transparent. Sinnvoll, da der Inhalt nun den gesamten Bildschirm einnimmt.

In diesem Szenario wird Folgendes hinzugefügt:

überlauf-y: auto;

bewirkt, dass die Bildlaufleisten automatisch ausgeblendet werden

Und in der Datei bootstraps responsive-utilities.less, Zeile 21 finden Sie den folgenden CSS-Code

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

Dieses Snippet verursacht das Verhalten. Ich empfehle, die im obigen kommentierten Code aufgeführten Links zu lesen. (Sie wurden hinzugefügt, nachdem ich diese Antwort ursprünglich gepostet habe.)

161
xec

Wie von xec in seiner Antwort erwähnt, wird dieses Verhalten durch die Einstellung @ -ms-viewport verursacht.

Die gute Nachricht ist, dass Sie diese Einstellung nicht entfernen müssen, um die Bildlaufleisten wieder zu erhalten (in unserem Fall verlassen wir uns auf die Einstellung @ -ms-viewport für responsives Webdesign). 

Mit dem -ms-overflow-style können Sie das Überlaufverhalten definieren, wie in diesem Artikel erwähnt:

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

Legen Sie den Stil auf Bildlaufleiste fest, um die Bildlaufleisten wieder anzuzeigen:

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

Scrollleiste 

Gibt an, dass das Element einen klassischen Bildlaufleisten-Typ anzeigt steuern, wenn sein Inhalt überläuft. Im Gegensatz zu -ms-autohiding-scrollbar gilt Bildlaufleisten für Elemente mit der Eigenschaft -ms-overflow-style auf Eine Bildlaufleiste erscheint immer auf dem Bildschirm und wird nicht ausgeblendet, wenn die Element ist inaktiv. Bildlaufleisten überlagern den Inhalt nicht und daher nehmen Sie an den Rändern des Elements, an dem sie Platz haben, zusätzlichen Platz ein erscheinen.

175
stefan.s

LÖSUNG: Zwei Schritte - Erkennen, ob IE10, dann CSS verwenden

tun Sie dies auf 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

Fügen Sie dieses CSS hinzu:

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

Warum es funktioniert:

  • Der overflow-y:scroll schaltet die vertikale Bildlaufleiste <body> dauerhaft ein.
  • Der -ms-overflow-style:scrollbar schaltet das automatische Ausblenden aus, wodurch der Inhalt verschoben wird und das Layoutverhalten der Bildlaufleiste angezeigt wird, das wir alle kennen.

Aktualisiert für Benutzer, die nach IE11 fragen . - Referenz https://docs.Microsoft.com/de-de/previous-versions/windows/internet-Explorer/ie-developer/compatibility/ms537503 (v=vs.85)

9
gdibble

Versuche dies

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

Dieses Problem tritt auch bei Datatables auf Bootstrap 4 auf. Mi Lösung war:

  1. Überprüft, ob der Browser geöffnet ist. 
  2. Tabelle-responsive Klasse für Table-Responsive-ie Klasse ersetzt. 

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