Jak mogę zapobiec nakładaniu się paska przewijania w IE10?

183

W IE10 pasek przewijania nie zawsze tam jest ... a kiedy się pojawia, pojawia się jako nakładka ... To fajna funkcja, ale chciałbym ją wyłączyć dla mojej konkretnej witryny, ponieważ jest to aplikacja pełnoekranowa i moja logo i menu są zagubione.

IE10:

wprowadź opis zdjęcia tutaj

CHROM:

wprowadź opis zdjęcia tutaj

Czy ktoś zna sposób na stałe ustawianie paska przewijania w IE10?

overflow-y: przewijanie wydaje się nie działać! po prostu umieszcza go na stałe na mojej stronie.

Być może przyczyną problemu jest bootstrap, ale której części nie mam pojęcia! patrz przykład tutaj: http://twitter.github.io/bootstrap/

html css scrollbar internet-explorer-11 internet-explorer-10 Jimmyt1988
źródło
Mój IE10 nie ma takiego zachowania, czy działasz jako aplikacja „Metro”?
xec
Nie, nie jestem. Jestem w systemie Windows 8, jeśli to robi jakąkolwiek różnicę. To samo dotyczy również mojego laptopa ... Możesz nie zauważyć tego zachowania paska przewijania, ponieważ inne strony internetowe, takie jak na przykład stackoverflow, znalazły sposób na obejście tego ... Mam nadzieję, że nowe zdjęcie pomoże odróżnić różnicę między tym, co robię, a tym, czego nie robię chcę
Jimmyt1988
Czy ma to coś wspólnego z ustawioną szerokością strony?
Albzi
Ustawienie szerokości strony działałoby. Niestety, zastanawiałem się, czy istnieje sposób na przeglądarkę. biorąc pod uwagę Firefox, Safari i Chrome nie mają takiego zachowania. Mógłbym użyć specyficznego doo-raggy dla IE10 ... chyba nie wydaje się to najbardziej elegancką odpowiedzią.
Jimmyt1988
@JamesT jestem na W8 też, ale nie może znaleźć dowolną stronę, która sprawia IE10 uczynić przewijania jako nakładkę (nawet moja przejdź do strony testowej, www.arngren.net)
XEC

Odpowiedzi:

163

Po trochę googlowania natknąłem się na dyskusję, w której komentarz pozostawiony przez „Blue Ink” brzmi:

Sprawdzając strony, udało mi się je odtworzyć za pomocą:

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

co powoduje, że paski przewijania stają się przezroczyste. Ma to sens, ponieważ zawartość zajmuje teraz cały ekran.

W tym scenariuszu dodanie:

przelew-y: auto;

powoduje automatyczne ukrywanie pasków przewijania

W pliku bootstraps responsive-utilities.less w linii 21 można znaleźć następujący kod 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;
}

Ten fragment jest przyczyną tego zachowania. Polecam przeczytanie linków wymienionych w komentarzowym kodzie powyżej. (Zostały dodane po tym, jak początkowo opublikowałem tę odpowiedź).

xec
źródło
74
Pan jest dżentelmenem i uczonym! Umieściłem @ -ms-viewport {szerokość: auto! Ważne; } do mojego pliku css i problem zniknął: D
Jimmyt1988
4
świetna odpowiedź, polecam innym, aby przeczytali artykuł wymieniony w komentarzu bootstrap: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - usunięcie tego kodu z bootstrap może zepsuć responsywność IE10 w Windows 8 metro
tmsimont
@tmsimont Dobra uwaga. Wygląda na to, że zmienili komentarz w najnowszym pliku źródłowym Boostrap (zaktualizowałem moją odpowiedź nowymi komentarzami), który teraz wspomina o użyciu skryptu wąchania UA do zastosowania tego do „ tylko Windowsa Surface / pulpitu Windows 8” - sprawdź link do problemu github.com/twbs/bootstrap/issues/10497
XEC
1
Naprawdę lubię bootstrap, ale chciałbym, żeby oddzieliły media i opcje rzutni w innym pliku. Tworzyłem responsywną stronę internetową po raz pierwszy i dosłownie musiałem usunąć mnóstwo rzeczy z bootstrap, aby moja strona działała tak, jak chciałem.
David
9
-ms-overflow-style: pasek przewijania; wydaje się być czystszym rozwiązaniem (patrz druga odpowiedź).
Manuel Arwed Schmidt
179

Jak wspomniał xec w swojej odpowiedzi, takie zachowanie jest spowodowane ustawieniem rzutni @ms.

Dobrą wiadomością jest to, że nie musisz usuwać tego ustawienia, aby odzyskać paski przewijania (w naszym przypadku korzystamy z ustawienia @ -ms-viewport do responsywnego projektowania stron internetowych).

Możesz użyć stylu -ms-overflow, aby zdefiniować zachowanie przepełnienia, jak wspomniano w tym artykule:

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

Ustaw styl paska przewijania, aby przywrócić paski przewijania:

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

pasek przewijania

Wskazuje, że element wyświetla klasyczną kontrolkę typu pasek przewijania, gdy jego zawartość się przepełnia. W przeciwieństwie do opcji -ms-autohiding-scrollbar, paski przewijania elementów z właściwością -ms-overflow-style ustawioną na pasek przewijania zawsze pojawiają się na ekranie i nie znikają, gdy element jest nieaktywny. Paski przewijania nie nakładają się na treść, dlatego zajmują dodatkowe miejsce w układzie wzdłuż krawędzi elementu, w którym się pojawiają.

stefan.s
źródło
9
Dodałem to do elementu html, tzn html{-ms-overflow-style: scrollbar;}. Działało to dla mnie. Czy byłyby przypadki użycia, w których byłoby to potrzebne gdzie indziej?
nHaskins
7
body{-ms-overflow-style: scrollbar;}działa dobrze dla mnie .. Dzięki
Manjit Singh
15
To powinna być odpowiedź. Zaakceptowany usuwa dostosowanie urządzenia rzutni.
mnsth
dodaje przepełnienie x
Monicka
1
@ stefan.s to jest poprawna odpowiedź! Należy zaakceptować
eirenaios,
12

ROZWIĄZANIE: Dwa kroki - sprawdź, czy IE10, a następnie użyj CSS:

zrób to na 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

Dodaj ten CSS:

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

Dlaczego to działa:

  • overflow-y:scrollTrwale włącza <body>znacznika pionowym pasku przewijania.
  • Do -ms-overflow-style:scrollbarwyłącza auto-ukrywanie zachowań, popychając treść nad i dając nam zachowanie układu przewijania wszyscy jesteśmy przyzwyczajeni.

Zaktualizowano dla użytkowników pytających o IE11. - Odwołanie https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

gdibble
źródło
14
dlaczego nie zrobiłbyś po prostu body {-ms-overflow-style: pasek przewijania; }?
Scott Romack
7
-1 Twój kod nie działa na IE11 i nie będzie na IE12, gdy zostanie wydany. Są lepsze sposoby wykonywania stylów specyficznych dla IE.
Joseph Lennox,
1
@JosephLennox Jeśli możesz dodać odpowiedź wskazującą lepszy sposób tworzenia stylów specyficznych dla IE, jestem pewien, że zarówno gdibble, jak i inni, którzy przyjdą na to pytanie, doceniliby to.
Widoczny kompilator
2
@ ConspicuousCompiler Prefiks „-ms-” już odpowiednio czyni go tylko IE.
Joseph Lennox
5
To jest jak odpowiedź @ stefan.s, ale z niepotrzebnym wzdęciem.
Ry-
4

Spróbuj tego

body{-ms-overflow-style: scrollbar !important;}
użytkownik2606817
źródło
0

Ten problem występuje również w przypadku Datatables na Bootstrap 4. Rozwiązaniem Mi było:

  1. Sprawdzone, czy przeglądarka np. Się otwiera.
  2. Zastąpiono klasę responsywną na tabelę dla klasy responsywnej na tabelę.

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');
        }
Primoshenko
źródło
-4

Wypróbowałem @ -ms-viewport i inne sugestie, ale żadna nie działała w moim przypadku z IE11 na Windows 7. Nie miałem żadnych pasków przewijania, a inne posty tutaj co najwyżej dałyby mi pasek przewijania, który nigdzie nie przewijał, mimo że był dużo treści. Znaleziono ten artykuł http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/, który został zredukowany do. . .

body { overflow-x: visible; }

. . . i załatwił sprawę dla mnie.

Toadmyster
źródło
2
Pytanie nie dotyczy brakujących pasków przewijania, ale półprzezroczystej nakładki pasków przewijania wprowadzonej jako efekt uboczny podczas używania paska ładującego. Możesz także spróbowaćbody { overflow: auto; }
xec