Bagaimana saya bisa mencegah konten overlay scrollbar di IE10?

183

Di IE10, bilah gulir tidak selalu ada di sana ... dan ketika muncul itu muncul sebagai hamparan ... Ini adalah fitur yang keren tapi saya ingin mematikannya untuk situs web spesifik saya karena ini adalah aplikasi layar penuh dan aplikasi saya logo dan menu hilang di belakangnya.

IE10:

masukkan deskripsi gambar di sini

CHROME:

masukkan deskripsi gambar di sini

Adakah yang tahu cara untuk selalu mengatur scrollbar pada posisinya di IE10?

overflow-y: gulir sepertinya tidak berfungsi! itu hanya menempatkannya secara permanen di situs web saya.

Mungkin bootstrap yang menyebabkan masalah tetapi bagian mana yang saya tidak tahu! lihat contoh di sini: http://twitter.github.io/bootstrap/

html css scrollbar internet-explorer-11 internet-explorer-10 Jimmyt1988
sumber
IE10 saya tidak memiliki perilaku ini, apakah Anda menjalankannya sebagai aplikasi "Metro"?
xec
Tidak. Saya di windows 8, jika itu membuat perbedaan. Ini sama pada laptop saya juga ... Anda mungkin tidak memperhatikan perilaku scrollbar ini karena situs web lain seperti stackoverflow misalnya telah menemukan jalan keluarnya ... Saya harap gambar baru ini membantu membedakan perbedaan antara apa yang saya lakukan dan yang tidak saya lakukan. mau
Jimmyt1988
Apakah ada hubungannya dengan lebar set halaman?
Albzi
Pengaturan lebar halaman akan bekerja .. sayangnya, saya bertanya-tanya apakah ada cara lintas browser. mengingat firefox, safari dan chrome tidak memiliki perilaku ini. Saya bisa menggunakan doo-raggy spesifik IE10 saya kira .. sepertinya bukan jawaban yang paling elegan.
Jimmyt1988
@JamesT Saya di w8 juga, tetapi tidak dapat menemukan halaman yang membuat IE10 merender bilah gulir sebagai overlay (bahkan halaman uji masuk saya, www.arngren.net)
xec

Jawaban:

163

Setelah googling sedikit saya menemukan diskusi di mana komentar yang ditinggalkan oleh "Tinta Biru" menyatakan:

Memeriksa halaman, saya berhasil mereproduksinya dengan menggunakan:

@ -ms-viewport {width: lebar perangkat; }

yang menyebabkan scrollbar menjadi transparan. Masuk akal, karena konten sekarang mengambil seluruh layar.

Dalam skenario ini, menambahkan:

overflow-y: otomatis;

membuat scrollbar menyembunyikan otomatis

Dan dalam file bootstraps responsif-utilities.less, baris 21 Anda dapat menemukan kode CSS berikut

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

Cuplikan ini yang menyebabkan perilaku. Saya sarankan membaca tautan yang tercantum dalam kode komentar di atas. (Mereka ditambahkan setelah saya awalnya memposting jawaban ini.)

xec
sumber
74
Anda, Tuan, adalah seorang pria dan sarjana! Saya menempatkan @ -ms-viewport {width: auto! Important; } ke file css saya dan pergi masalahnya: D
Jimmyt1988
4
jawaban yang bagus, saya akan merekomendasikan kepada orang lain bahwa Anda membaca artikel yang direferensikan dalam komentar bootstrap: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - menghapus kode dari bootstrap dapat merusak respons IE10 di Windows 8 metro
tmsimont
@ tmsimont Poin bagus. Selain itu, mereka tampaknya telah mengubah komentar di file sumber Boostrap terbaru (memperbarui jawaban saya dengan komentar baru), yang sekarang menyebutkan penggunaan skrip sniffing UA untuk menerapkan ini pada " hanya Surface / desktop Windows 8" - centang keluar tautan masalah github.com/twbs/bootstrap/issues/10497
xec
1
Saya sangat suka bootstrap tapi saya berharap mereka akan memisahkan opsi media dan viewport dalam file yang berbeda. Saya sedang membangun situs web responsif untuk pertama kalinya dan saya benar-benar harus pergi dan menghapus banyak hal dari bootstrap untuk membuat situs saya berfungsi seperti yang saya inginkan.
David
9
-ms-overflow-style: scrollbar; tampaknya menjadi solusi bersih (lihat jawaban kedua).
Manuel Arwed Schmidt
179

Seperti yang disebutkan xec dalam jawabannya, perilaku ini disebabkan oleh pengaturan @ -ms-viewport.

Berita baiknya adalah Anda tidak perlu menghapus pengaturan ini untuk mendapatkan kembali scrollbar (dalam kasus kami, kami bergantung pada pengaturan @ -ms-viewport untuk desain web yang responsif).

Anda dapat menggunakan -ms-overflow-style untuk mendefinisikan perilaku overflow, sebagaimana disebutkan dalam artikel ini:

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

Setel gaya ke bilah gulir untuk mendapatkan bilah gulir kembali:

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

scroll bar

Menunjukkan elemen menampilkan kontrol tipe scrollbar klasik ketika isinya meluap. Tidak seperti -ms-autohiding-scrollbar, scrollbar pada elemen dengan properti -ms-overflow-style yang disetel ke scrollbar selalu muncul di layar dan tidak menghilang ketika elemen tidak aktif. Bilah gulir tidak menampilkan konten, dan karenanya mengambil ruang tata letak tambahan di sepanjang tepi elemen tempat konten itu muncul.

stefan.s
sumber
9
Saya menambahkan ini pada elemen html, yaitu html{-ms-overflow-style: scrollbar;}dan itu berhasil untuk saya. Apakah akan ada kasus penggunaan di mana ini dibutuhkan di tempat lain?
nHaskins
7
body{-ms-overflow-style: scrollbar;}bekerja dengan baik untuk saya .. Terima kasih
Manjit Singh
15
Ini seharusnya jawabannya. Yang diterima menghapus adaptasi perangkat viewport.
mnsth
itu menambahkan overflow pada x
Monicka
1
@ stefan.s ini adalah jawaban yang benar! Harus diterima
eirenaios
12

SOLUSI: Dua langkah - mendeteksi jika IE10, lalu gunakan CSS:

lakukan ini di 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

Tambahkan CSS ini:

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

Mengapa ini bekerja:

  • Secara overflow-y:scrollpermanen menyalakan <body>bilah gulir vertikal tag.
  • The -ms-overflow-style:scrollbarbergantian off perilaku auto-bersembunyi, sehingga mendorong konten melalui dan memberikan kita perilaku tata letak scrollbar kita semua digunakan untuk.

Diperbarui untuk pengguna yang bertanya tentang IE11. - Referensi https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

menggigit
sumber
14
mengapa kamu tidak melakukan body {-ms-overflow-style: scrollbar; }?
Scott Romack
7
-1 Kode Anda tidak berfungsi di IE11 dan tidak akan ada di IE12 saat dirilis. Ada cara yang lebih baik untuk melakukan gaya khusus IE.
Joseph Lennox
1
@ JosephLennox Jika Anda bisa menambahkan jawaban untuk menunjukkan cara yang lebih baik untuk melakukan gaya khusus IE, saya yakin baik gdibble dan orang lain yang datang ke pertanyaan ini akan sangat menghargainya.
Compiler yang mencolok
2
@ConspicuousCompiler Awalan "-ms-" sudah cukup membuatnya hanya IE.
Joseph Lennox
5
Ini seperti jawaban @ stefan.s, tetapi dengan mengasapi yang tidak perlu.
Ry-
4

Coba ini

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

Masalah ini juga terjadi dengan Datatables pada Bootstrap 4. Solusi Mi adalah:

  1. Diperiksa apakah browser yaitu sedang dibuka.
  2. Kelas responsif-meja yang diganti untuk kelas responsif-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
sumber
-4

Mencoba @ -ms-viewport dan saran lain tetapi tidak ada yang berhasil dalam kasus saya dengan IE11 pada Windows 7. Saya tidak punya scroll bar dan posting lain di sini paling banyak akan memberi saya scroll bar yang tidak menggulir di mana pun walaupun ada banyak konten. Ditemukan artikel ini http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ yang berkurang menjadi. . .

body { overflow-x: visible; }

. . . dan melakukan trik untukku.

Toadmyster
sumber
2
Pertanyaannya bukan tentang scrollbar yang hilang, tetapi tentang overlay scrollbar semi-transparan yang diperkenalkan sebagai efek samping saat menggunakan bootstrap. Anda juga dapat mencobabody { overflow: auto; }
xec