Наложение полосы прокрутки в IE10, как вы это прекратите?

В IE10 полоса прокрутки не всегда существует... и когда она появляется, она появляется как оверлей... Это классная функция, но я хотел бы отключить ее для моего конкретного веб-сайта, поскольку это полный экран приложение и мои логотипы и меню потеряны за ним.

IE10:

enter image description here

ХРОМ:

enter image description here

Кто-нибудь знает способ всегда иметь полосу прокрутки, зафиксированную в позиции на IE10?

overflow-y: прокрутка не работает! он просто ставит его навсегда на моем сайте.

Это может быть проблема загрузки, но какая часть я понятия не имею! см. пример здесь: http://twitter.github.io/bootstrap/

Ответы

Ответ 1

После того, как я немного поработал, я наткнулся на это; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom, где комментарий, оставленный "Синими чернилами", гласит:

Проверяя страницы, мне удалось воспроизвести ее, используя:

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

что заставляет полосы прокрутки становиться прозрачными. Имеет смысл, поскольку теперь содержимое занимает весь экран.

В этом случае добавление:

overflow-y: auto;

позволяет скроллировать полосы прокрутки

И в файле 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;
}

Этот фрагмент вызывает поведение. Я рекомендую прочитать ссылки, перечисленные в комментариях выше. (Они были добавлены после того, как я изначально опубликовал этот ответ.)

Ответ 2

Как упоминалось в его ответе xec, это поведение вызвано настройкой @-ms-viewport.

Хорошей новостью является то, что вам не нужно удалять этот параметр, чтобы вернуть полосы прокрутки (в нашем случае мы полагаемся на параметр @-ms-viewport для гибкого веб-дизайна).

Вы можете использовать стиль -ms-overflow, чтобы определить поведение переполнения, как указано в этой статье:

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

Установите стиль в полосу прокрутки, чтобы вернуть полосы прокрутки:

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

полоса прокрутки

Указывает, что элемент отображает классический тип прокрутки когда его содержимое переполняется. В отличие от -ms-authiding-scrollbar, прокрутки на элементах с свойством -ms-overflow-style, установленным для полоса прокрутки всегда появляется на экране и не исчезает, когда элемент неактивен. Полосы прокрутки не перекрывают содержимое, и поэтому возьмите дополнительное пространство макета по краям элемента, где они появляются.

Ответ 3

РЕШЕНИЕ: Два шага - определить, если IE10, а затем использовать CSS:

сделайте это в init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
}

Добавьте этот CSS:

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

Почему это работает:

  • overflow-y:scroll постоянно включает вертикальную полосу прокрутки тега <body>.
  • -ms-overflow-style:scrollbar отключает поведение автоматического скрытия, тем самым увеличивая содержимое и предоставляя нам поведение макета полосы прокрутки, к которому мы все привыкли.

Ответ 4

Попробуйте это

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

Ответ 5

Пробовал @-ms-viewport и другие предложения, но никто не работал в моем случае с IE11 в Windows 7. У меня не было полос прокрутки, и другие сообщения здесь могли бы дать мне полосу прокрутки, которая нигде не прокручивалась хотя было много контента. Нашел эту статью http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/, которая сводится к.,.

body { overflow-x: visible; }

., и помогло.