/ / Накладання смуги прокрутки в IE10, як це зупинити? - html, css, twitter-bootstrap, смуга прокрутки, Internet-explorer-10

Накладання прокрутки в IE10, як це зупинити? - html, css, twitter-bootstrap, прокрутка, internet-explorer-10

У IE10 смуга прокрутки не завжди є ... і коли він з’являється, він з’являється як накладення ... Це класна функція, але я хотів би вимкнути його для свого конкретного веб-сайту, оскільки це повноекранна програма, і мої логотипи та меню за цим втрачені.

IE10:

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

ХРОМ:

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

Хто-небудь знає спосіб постійного встановлення смуги прокрутки в положенні на IE10?

overflow-y: прокрутка, здається, не працює! вона просто постійно розміщує її на моєму веб-сайті.

Можливо, причиною проблеми є bootstrap, але яку частину я не маю уявлення! дивіться приклад тут: http://twitter.github.io/bootstrap/

Відповіді:

155 для відповіді № 1

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

Перевіривши сторінки, мені вдалося відтворити його, використовуючи:

@ -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;
}

Цей фрагмент є причиною поведінки. Я рекомендую прочитати посилання, перелічені в коментованому коді вище. (Вони були додані після того, як я спочатку розмістив цю відповідь.)


170 за відповідь № 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-autohiding-scrollbar, смуги прокрутки на елементах із властивістю -ms-overflow-style, встановленою на смуга прокрутки завжди з'являється на екрані і не зникає, коли елемент неактивний. Полоски прокрутки не накладають вміст, а отже займають додатковий простір розмітки по краях елемента, де вони з'являються.


9 для відповіді № 3

РІШЕННЯ: Два кроки - виявити, якщо IE10, а потім використовувати CSS:

зробіть це на init:

if (/msies10.0/gi.test(navigator.appVersion)) {
$("body").addClass("IE10");
}

Додати цей CSS:

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

Чому це працює:

  • The overflow-y:scroll постійно включає <body> тег вертикальної смуги прокрутки.
  • The -ms-overflow-style:scrollbar вимикає поведінку автоматичного приховування, переносячи таким чином вміст і надаючи нам поведінку макета прокрутки, до якої ми всі звикли.

5 за відповідь № 4

Спробуйте це

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

-4 для відповіді № 5

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

body { overflow-x: visible; }

. . . і зробив трюк для мене.