IE10でスクロールバーがコンテンツをオーバーレイしないようにするにはどうすればよいですか？

183

IE10では、スクロールバーは常にそこにあるとは限りません...スクロールバーが表示されるとオーバーレイとして表示されます...これはクールな機能ですが、特定のWebサイトではフルスクリーンアプリケーションであり、ロゴとメニューはその背後で失われます。

IE10：

ここに画像の説明を入力してください

クロム：

ここに画像の説明を入力してください

IE10でスクロールバーを常に固定する方法を知っている人はいますか？

overflow-y：scrollが機能していないようです！それは私のウェブサイトにそれを永久に置きます。

ブートストラップが問題の原因である可能性がありますが、どの部分がわからないのですか？ここの例を参照してください：http : //twitter.github.io/bootstrap/

html  css  scrollbar  internet-explorer-11  internet-explorer-10 
— ジミート1988
ソース
IE10にはこの動作がありません。「メトロ」アプリとして実行していますか？
— xec 2013年
いいえ、違います。私はWindows 8を使用しています。それは私のラップトップでも同じです...たとえば、stackoverflowのような他のWebサイトがそれを回避する方法を見つけたので、このスクロールバーの動作に気付かないかもしれません...新しい画像が私が行うこととしないことの違いを区別するのに役立つことを願っています欲しい
— Jimmyt1988
それはページの設定された幅と関係がありますか？
— Albzi 2013年
ページの幅を設定するとうまくいきます..悲しいかな、クロスブラウザの方法があるかと思っていました。Firefox、Safari、Chromeにはこのような動作はありません。私はIE10固有のだらしないと思うかもしれませんが、最もエレガントな答えのようには思えません。
— Jimmyt1988 2013年
@JamesT私もw8を使っていますが、IE10がスクロールバーをオーバーレイとしてレンダリングするページを見つけることができません（私のテストページwww.arngren.netも含めない）
— xec

回答:

163

少しググった後、私は「Blue Ink」によって残されたコメントが述べている議論を偶然見つけました：

ページを検査して、私は何とかしてそれを再現することができました：

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

これにより、スクロールバーが透明になります。コンテンツが画面全体を占めるようになったので、理にかなっています。

このシナリオでは、以下を追加します。

overflow-y：auto;

スクロールバーを自動的に非表示にします

そして、ブートストラップのresponsive-utilities.lessファイルの21行目に 、次の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;
}

このスニペットは、動作を引き起こしているものです。上記のコメント付きコードにリストされているリンクを読むことをお勧めします。（これらは、私が最初にこの回答を投稿した後に追加されました。）

— xec
ソース
74
あなたは紳士で学者です！@ -ms-viewport {width：auto！important;を配置しました }私のcssファイルに入れて、問題は解決しました：D
— Jimmyt1988
4
偉大な答えは、私はあなたが、ブートストラップのコメントで参照記事を読むことを他の人にお勧めします：timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design -ブートストラップからそのコードを除去することでIE10応答性を壊すかもしれませんWindows 8メトロ
— tmsimont 2013年
@tmsimont良い点。また、最新のBoostrapソースファイルのコメントが変更されたようです（私の回答が新しいコメントで更新されました）。これは、これを「Surface /デスクトップWindows 8 のみ」に適用するUAスニッフィングスクリプトの使用について言及しています-チェック問題リンクgithub.com/twbs/bootstrap/issues/10497
— xec
1
私は本当にブートストラップが好きですが、メディアとビューポートのオプションを別のファイルに分けて欲しいです。私は初めてレスポンシブなWebサイトを構築していましたが、文字通り大量のデータをブートストラップから削除して、サイトを希望どおりに機能させる必要がありました。
— David
9
-ms-overflow-style：スクロールバー。よりクリーンなソリューションのようです（2番目の回答を参照）。
— Manuel Arwed Schmidt 2015
179

xecが彼の回答で述べたように、この動作は@ -ms-viewport設定が原因です。

良いニュースは、スクロールバーを元に戻すためにこの設定を削除する必要がないことです（この場合、レスポンシブWebデザインでは@ -ms-viewport設定に依存しています）。

この記事で説明したように、-ms-overflow-styleを使用してオーバーフロー動作を定義できます。

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

スタイルをscrollbarに設定して、スクロールバーを元に戻します。

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

スクロール・バー

コンテンツがオーバーフローしたときに、要素がクラシックスクロールバータイプのコントロールを表示することを示します。-ms-autohiding-scrollbarとは異なり、-ms-overflow-styleプロパティがscrollbarに設定されている要素のスクロールバーは常に画面に表示され、要素が非アクティブのときにフェードアウトしません。スクロールバーはコンテンツをオーバーレイしないため、スクロールバーが表示される要素の端に沿って余分なレイアウトスペースを占有します。

— stefan.s
ソース
9
これをhtml要素に追加html{-ms-overflow-style: scrollbar;}しました。つまり、私にとってはうまくいきました。これが他の場所で必要になるユースケースはありますか？
— nHaskins 2014
7
body{-ms-overflow-style: scrollbar;}私のために正常に動作します。ありがとう
— Manjit Singh
15
これが答えです。承認されたものは、ビューポートデバイスの適応を削除します。
— 2015
xにオーバーフローを追加します
— モニカ2015
1
@ stefan.sこれが正解です！受け入れる必要があります
— eirenaios 2017
12

解決策： 2つのステップ-IE10かどうかを検出し、CSSを使用します。

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

このCSSを追加します。

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

なぜ機能するのか：

  • overflow-y:scroll恒久的にオンに<body>タグ垂直スクロールバー。
  • -ms-overflow-style:scrollbarオート隠れて行動オフになり、これ以上のコンテンツをプッシュし、私たちはすべてのために使用しているスクロールバーのレイアウト動作を与えます。

IE11について質問するユーザー向けに更新されました。-参照https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85）

— ぐしゃぐしゃ
ソース
14
なぜbody {-ms-overflow-style：scrollbar; }？
— Scott Romack 14年
7
-1コードはIE11では機能せず、リリース時にIE12では機能しません。IE固有のスタイルを実行するためのより良い方法があります。
— ジョセフレノックス2014
1
@JosephLennox IE固有のスタイルを実行するためのより良い方法を示すために回答を追加できれば、gdibbleとこの質問に参加した他の人の両方がそれを高く評価すると思います。
— 目立つコンパイラ
2
@ConspicuousCompiler "-ms-"プレフィックスは、すでにIEのみを適切にしています。
— ジョセフレノックス
5
これは@ stefan.sの答えに似ていますが、不必要な膨満感があります。
— Ry-
0

この問題は、Bootstrap 4のDatatablesでも発生しています。Miソリューションは次のとおりです。

  1. IEブラウザが開いているかどうかを確認した。
  2. table-sensitive-ieクラスの代わりにtable-sensitiveクラスを使用します。

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');
        }
— プリモシェンコ
ソース
-4

@ -ms-viewportやその他の提案を試してみましたが、Windows 7のIE11を使用した場合は何も機能しませんでした。たくさんのコンテンツ。この記事はhttp://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/になり、に減少しました。。。

body { overflow-x: visible; }

。。。トリックをしてくれました。

— トードミスター
ソース
2
問題はスクロールバーの欠落についてではなく、ブートストラップを使用するときに副作用として導入される半透明のスクロールバーオーバーレイについてです。あなたも試すことができますbody { overflow: auto; }
— 15:09のxec
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.