web-dev-qa-db-ja.com

IE10のスクロールバーオーバーレイ、それをどのように停止しますか？

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

IE10：

enter image description here

CHROME：

enter image description here

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

overflow-y：scrollが機能しないようです！私のウェブサイトに永久に置くだけです。

問題の原因はbootstrapかもしれませんが、どの部分がわからないのでしょうか。ここの例を参照してください： http://Twitter.github.io/bootstrap/

htmlcsstwitter-bootstrapscrollbarinternet-explorer-10
180
Jimmyt1988

少しググリングした後、私はこれに出くわしました。 http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom 「ブルーインク」が残したコメントの状態：

ページを調べて、私は何とかしてそれを再現しました：

@ -ms-viewport {width：デバイス幅; }

これにより、スクロールバーが透明になります。コンテンツが画面全体を占めるようになったため、意味があります。

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

オーバーフローy：自動;

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

そして bootstraps 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;
}

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

160
xec

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

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

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

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

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

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

スクロールバー

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

177
stefan.s

SOLUTION：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）

9
gdibble

これを試して

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

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

  1. IEブラウザが開いているかどうかを確認しました。
  2. テーブル応答クラスをテーブル応答クラスに置き換えました。

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