Как отключить наложение скроллбара на контент в IE10?

Быстрый ответ

Если вы хотите избежать перекрытия контента полосой прокрутки в IE10, примените CSS-атрибут -ms-overflow-style: scrollbar; к нужным div. После этого полоса прокрутки будет отведена отдельная область, благодаря чему она не будет накладываться на контент.

.div-class {
  -ms-overflow-style: scrollbar;
}

Примените этот класс .div-class к элементам div, и проблема будет решена.

Подход к решению: Почему это работает

Адаптивный дизайн без неожиданностей

Будьте аккуратны с методом @-ms-viewport { width: device-width; } на адаптивных сайтах. Использование этого метода может привести к нежелательному перекрытию контента полосой прокрутки. Рекомендуется управлять адаптивностью через контейнеры и контрольные точки в медиа-запросах.

Подробнее об этом расскажет наш спикер на видео

Когда Bootstrap становится препятствием

Bootstrap может мешать корректной визуализации полосы прокрутки. Проверьте responsive-utilities.less на наличие метода @-ms-viewport, который может стать источником проблемы.

Различия между версиями браузера Internet Explorer

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

Используйте следующий код на JavaScript для определения версий IE10/IE11:

if (navigator.userAgent.match(/Trident\/7\./)) {
  document.body.classList.add('ie10');
}

Таким образом, вы сможете индивидуально настроить внешний вид сайта под эти версии браузера.

Правильное использование !important

Иногда может потребоваться использование !important в совокупности с -ms-overflow-style: scrollbar;, чтобы переопределить другие стили. Но будьте осторожны с этим, чтобы не усложнить последующую поддержку кода.

Адаптивные таблицы в Bootstrap 4

Если Bootstrap 4 и адаптивные таблицы вызывают проблемы, используйте класс .table-responsive-ie:

.table-responsive-ie {
  -ms-overflow-style: scrollbar;
}

Применяйте специальные классы для IE, используя JavaScript.

Визуализация

Для понимания проблемы полезно визуализировать ее. Представьте, что полоса прокрутки – это 🚪🚉, которая конфликтует с контентом 📜📜. Чтобы избежать этого, нужно отвести полосе прокрутки отдельное пространство.

Проблема:

Контент: 📜📜, Полоса прокрутки: 🚪🚉

Решение:

Контент: 📜📜, Пространство для полосы прокрутки: 🚪🚉

Такой подход позволит обеспечить видимость контента и максимальное удобство для пользователя.

Дополнение: Несколько полезных советов

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

Используя атрибут overflow-y: scroll;, можно гарантировать постоянную видимость вертикальной полосы прокрутки. Это поможет избежать неожиданных изменений в макете.

.div-class {
  overflow-y: scroll;
}

Стилизация полос прокрутки у пользовательских элементов

Для стилизации пользовательских прокручиваемых элементов примените атрибут -ms-overflow-style: scrollbar;. Это поможет избежать наложения на контент.

.custom-scroll {
  -ms-overflow-style: scrollbar;
}

Полезные материалы

1. Custom Scrollbars in WebKit | CSS-Tricks – сочетание WebKit и пользовательских полос прокрутки.
2. Compatibility changes in IE11 (Windows) | Microsoft Learn – руководство по совместимости в IE10 и IE11.
3. Hide scroll bar, but still being able to scroll | Stack Overflow – о том, как скрыть полосу прокрутки, не потеряв прокрутку.
4. Scrollbar-gutter – CSS: Cascading Style Sheets | MDN – подробное описание свойства scrollbar-gutter.
5. CSS Overflow Module Level 3 – о принципах работы механизма прокрутки в браузерах.
6. "Css-scrollbar-gutter" | Can I use... Support tables for HTML5, CSS3, etc – информация о поддержке свойства браузерами.
7. The Current State of Styling Scrollbars (MDN) – современные тренды в стилизации полос прокрутки.