Как предотвратить уменьшение ширины макета вертикальной полосой прокрутки (избегайте смещения на 8 пикселей) при появлен ⇐ CSS

[Anonymous]

Заголовок: Как предотвратить смещение вертикальной полосы прокрутки горизонтальных макетов фиксированной ширины в Windows?
Я работаю над информационной панелью фиксированной ширины (1920 пикселей), где у меня есть строка ровно из 7 полей ввода. В соответствии с требованиями проектирования эти входы должны оставаться на одной линии. Однако я сталкиваюсь с проблемой смещения макета в браузерах Windows при появлении вертикальной полосы прокрутки.
Проблема:

Мой макет имеет боковые отступы размером 70 пикселей. Когда появляется вертикальная полоса прокрутки (обычно шириной 8–15 пикселей в Windows), полезная ширина области просмотра падает с 1920 пикселей примерно до 1905 пикселей. Это небольшое сокращение приводит к переносу седьмого ввода на новую строку, что нарушает пользовательский интерфейс.
Что я пробовал:

• Код: Выделить всё

  scrollbar-gutter: stable

  [/b]: я применил это к тегам html и body. Хотя он предотвращает эффект «прыжка», резервируя место, он не гарантирует постоянную ширину, поскольку некоторые браузеры по-прежнему освобождают это пространство, когда прокрутка невозможна.
  css

  Код: Выделить всё

  html, body {
  overflow-y: auto;
  scrollbar-gutter: stable;
  }
  
  

  Используйте код с осторожностью.
• Стилизация полосы прокрутки Webkit: я попытался сузить полосу прокрутки, но она все равно занимает пространство макета независимо от ее ширины.
  css

  Код: Выделить всё

  .container::-webkit-scrollbar { width: 8px; }
  
  

  Используйте код с осторожностью.
• Устаревшее переполнение: overlay: я тестировал это свойство, но, поскольку оно нестандартное, современные браузеры просто воспринимают его как переполнение: auto.
• Hack Negative Margin Hack: я попробовал компенсировать ширину полосы прокрутки с помощью отрицательные поля, но это кажется хрупким, поскольку ширина полосы прокрутки различается в зависимости от версии Windows и настроек масштабирования.

Мои ограничения:

• Вертикальная полоса прокрутки должна появляться только при необходимости (не быть видимой постоянно).
• Полоса прокрутки не должна уменьшать доступную ширину макета (поведение наложения).
• Я хочу избежать смещения макета, не полагаясь на жестко закодированные значения пикселей для ширины полосы прокрутки.

Вопрос:

Существует ли стандартный кросс-браузерный метод CSS или JavaScript для создания «наложенной» полосы прокрутки в Windows, которая не занимает пространство макета? Или такое поведение принципиально привязано к настройкам ОС/браузера, а это значит, что я должен спроектировать свой макет достаточно плавно, чтобы поглотить эти 15 пикселей?


Подробнее здесь: https://stackoverflow.com/questions/798 ... px-shift-w