it-swarm.com.ru

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

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

IE10:

enter image description here

ХРОМ:

enter image description here

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

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

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

180
Jimmyt1988

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

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

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

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

В этом сценарии добавление:

переполнение-у: авто;

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

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

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

157
xec

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

Хорошей новостью является то, что вам не нужно удалять этот параметр, чтобы вернуть полосы прокрутки (в нашем случае мы используем настройку @ -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, установленным в Полоса прокрутки всегда появляется на экране и не исчезает, когда элемент неактивен. Полосы прокрутки не перекрывают содержимое, и поэтому занимают дополнительное пространство макета по краям элемента, где они появляются.

175
stefan.s

РЕШЕНИЕ: Два шага - определить, если 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

Эта проблема также происходит с Datatables на Bootstrap 4. 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