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

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

IE10:

введите описание изображения здесь

ХРОМ:

введите описание изображения здесь

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

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

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

Немного погрозив, я наткнулся на это; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom, где комментарий, оставшийся от «Blue Ink», гласит:

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

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

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

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

overflow-y: auto;

делает прокрутки автоматически спрятаны

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

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

Как упоминал 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; } 

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

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

РЕШЕНИЕ: Два шага – определить, если 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 постоянно включает вертикальную полосу прокрутки тега .
  • Стиль -ms-overflow-style:scrollbar отключает поведение авто-скрытия, тем самым подталкивая содержимое и предоставляя нам поведение макета полосы прокрутки, к которому мы привыкли.

Попробуй это

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

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

body { overflow-x: visible; }

, , , и сделал трюк для меня.