Як я можу запобігти накладенню смуги прокрутки, що накладає вміст у IE10?

183

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

IE10:

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

ХРОМ:

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

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

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

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

— Джимміт1988
джерело

Мій IE10 не має такої поведінки, чи запускаєте ви це як додаток "Метро"?

— xec

Ні я не. Я в Windows 8, якщо це має значення. Це теж саме на моєму ноутбуці ... Ви можете не помітити подібної поведінки прокрутки, тому що інші веб-сайти, наприклад, stackoverflow, наприклад, знайшли шлях ... Я сподіваюся, що нова картина допоможе розрізнити різницю між тим, що я роблю, а що ні хочу

— Jimmyt1988

Це щось стосується заданої ширини сторінки?

— Альбзі

Встановлення ширини сторінки спрацювало б ... на жаль, мені було цікаво, чи існує спосіб перехресного браузера. вважаючи, що Firefox, сафарі та хром не мають такої поведінки. Я можу використати специфічний для IE10 Doo-raggy, я думаю, просто не здається найелегантнішою відповіддю.

— Jimmyt1988

@JamesT Я теж на w8, але не можу знайти жодну сторінку, яка змушує IE10 зробити панель прокрутки як накладку (навіть не мою тестову сторінку для переходу, www.arngren.net)

— xec

163

Після трохи погуглившись, я наткнувся на дискусію, де коментар, залишений "Блакитною фарбою", говорить:

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

@ -ms-viewport {width: ширина пристрою; }

завдяки чому смуги прокрутки стають прозорими. Має сенс, оскільки вміст зараз займає весь екран.

У цьому сценарії додаємо:

overflow-y: авто;

робить смуги прокрутки автоматично ховати

А у файлі bootstraps respovable-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;
}

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

— xec
джерело

74

Ви, пан, пан і науковець! Я розмістив @ -ms-viewport {width: auto! Важливо; } в мій файл css і проблема пішла: D

— Jimmyt1988,

4

чудова відповідь, я рекомендую іншим прочитати статтю, на яку посилається у коментарі bootstrap: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - видалення цього коду з завантажувальної програми може порушити чутливість IE10 у Metro Windows 8

— tmsimont

@tmsimont Добре. Крім того, вони, схоже, змінили коментар у останньому вихідному файлі Boostrap (оновлено мою відповідь новими коментарями), де зараз згадується про використання сценарію нюхування UA, щоб застосувати це до " лише Windows 8 / Surface / Desktop" - перевірте з посилання на випуск github.com/twbs/bootstrap/isissue/10497

— xec

1

Мені дуже подобається завантажувач, але я б хотів, щоб вони розділили параметри медіа та перегляду в іншому файлі. Я будував чуйний веб-сайт вперше, і мені буквально довелося зайти і вийняти з завантажувальної програми багато тонн, щоб мій сайт функціонував так, як я цього хотів.

— Девід

9

-ms-overflow-style: смуга прокрутки; здається, чистіше рішення (див. другу відповідь).

— Мануель Арвед Шмідт

179

Як згадував 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-смуги прокрутки, прокрутки на елементах із властивістю -ms-overflow-стилю, встановленими на панелі прокрутки, завжди з’являються на екрані і не вицвітають, коли елемент неактивний. Панелі прокрутки не накладають вміст, а тому займають додатковий простір макета уздовж країв елемента, де вони з’являються.

— stefan.s
джерело

9

Я додав це на html-елемент, тобто html{-ms-overflow-style: scrollbar;}він працював на мене. Чи будуть випадки використання, коли це було потрібно в інших місцях?

— nHaskins

7

body{-ms-overflow-style: scrollbar;}добре працює для мене .. Дякую

— Manjit Singh

15

Це має бути відповіддю. Прийнятий знімає адаптацію пристрою перегляду.

— mnsth

це додає переповнення на x

— Monicka

1

@ stefan.s це правильна відповідь! Слід прийняти

— eirenaios

12

РІШЕННЯ: Два кроки - виявіть, чи є 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)

— гдібл
джерело

14

чому б ти не просто робив body {-ms-overflow-style: прокрутка; }?

— Скотт Ромак

7

-1 Ваш код не працює на IE11, і він не буде в IE12 при його випуску. Є кращі способи робити стилі, характерні для IE.

— Джозеф Леннокс

1

@JosephLennox Якщо ви можете додати відповідь, щоб вказати на кращий спосіб виконання специфічних для IE стилів, я впевнений, що і gdibble, і інші, хто підійде до цього питання, оцінять це.

— Помітний компілятор

2

@ConspicuousCompiler Префікс "-ms-" вже адекватно робить його лише IE.

— Джозеф Леннокс

5

Це схоже на відповідь @ stefan.s, але із зайвим нальотом.

— Ри-

4

Спробуйте це

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

— user2606817
джерело

0

Ця проблема також трапляється з Datatables на Bootstrap 4. Рішення Mi:

Перевіряється, чи не відкриється браузер.
Замінений клас, що реагує на таблицю, на клас, що відповідає методу, тобто клас.

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');
        }

— Примошенко
джерело

-4

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

body { overflow-x: visible; }

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

— Тодмістер
джерело

2

Питання стосується не пропущених смуг прокрутки, а про напівпрозорі накладки прокрутки, що вводяться як побічний ефект при використанні завантажувальної програми. Ви також можете спробуватиbody { overflow: auto; }

— xec