Полоса прокрутки Chrome исчезает (не переполняется-y)

Страница (live-version) состоит (примерно) из трех частей:

  • Левая панель
  • Центрированный контент
  • Правая боковая панель

Правая боковая панель должна быть прокручиваемой, поэтому я установил overflow-y: scroll; right: -17px;, чтобы просто скрыть полосу прокрутки. Body, html имеют overflow-y: auto;. Таким образом, мне не нужно иметь две полосы прокрутки (для страницы и для правой боковой панели).

ВОПРОС: (только в CHROME, проверены на версии 62 и 63)

По какой-то причине на разных машинах хром дает мне два разных стиля для полосы прокрутки: Case 1 и Случай 2.

В принципе, для case 1 панель прокрутки правой боковой панели "абсолютно позиционируется", и из-за этого страница скрывает 17px, а для case 2 полоса прокрутки "относительно позиционируется", и страница скрывает 17px, что занимает полоса прокрутки.

Вопрос

1) Почему полосы прокрутки отличаются в той же ОС и версии браузера, но разные машины?

2) Есть ли способ исправить это без каких-либо плагинов? Принимая во внимание, что пользователи Windows имеют case 2 и пользователи MacOS либо случай 1, либо 2?

Ответы

Ответ 1

1) Почему полосы прокрутки отличаются в той же ОС и версии браузера, но разные машины?

Это, вероятно, связано с системными настройками в macOS.

MacOS scroll bar Настройки ОС

Если вы выбрали Always, я уверен, что полоса прокрутки отталкивает содержимое страницы. То же самое, если у вас есть мышь. В противном случае у вас есть "абсолютно позиционированное" поведение, о котором вы говорили. Имейте в виду, что пользователи Windows, вероятно, будут видеть поведение, подобное Always.

2) Есть ли способ исправить это без каких-либо плагинов? Принимая во внимание пользователей Windows, пользователи 2 и MacOS имеют случай 1 или 2?

Ну, сначала немного мнение: я не думаю, что это хорошая идея, чтобы скрыть полосу прокрутки, не предоставляя другой сигнал пользователю, сообщающему прокручиваемость элемента. Во всяком случае, с этой стороны, я не могу думать ни о чем, что не какой-то хак, но здесь идет:

Поскольку это то, что нужно выполнить только один раз, и предполагая, что мы хотим предсказуемой функциональности в браузерах и ОС, вы можете использовать некоторые JS здесь. В системах, которые сохраняют боковую панель, свойства offsetWidth и scrollWidth элемента боковой панели будут разными. По умолчанию ваш элемент может иметь следующие стили:

$child-h-padding: 15px;
$max-scrollbar-width: 35px;

.r-sidebar {
  overflow-y: scroll;
  padding: 12px $child-h-padding;
  ...rest
}

.r-sidebar--r-padded {
  padding-right: $child-h-padding + $max-scrollbar-width;
  right: -$max-scrollbar-width;
}

Ответ 2

Перемещение полосы прокрутки из вида пользователей не так хорошо подходит для скрытия полосы прокрутки.

Есть ли способ исправить это без каких-либо плагинов?

Это то, что вы ищете?

.r-sidebar::-webkit-scrollbar { display: none; }

Это скроет вашу полосу прокрутки на всех браузерах Chrome. Поскольку он специфичен для webkit, он должен работать в разных операционных системах, предполагая, что версии браузера обновлены.

Подробнее здесь

Почему полосы прокрутки отличаются от той же ОС и версии браузера, но разные машины

У меня нет немедленного ответа для этого, но, пожалуйста, предоставьте более подробную информацию о версиях машин/os/версиях браузера, и я постараюсь дать дополнительный ответ

Ответ 3

Левая боковая панель:

Добавьте это в div прокрутки:

direction: rtl;
left: -17px;

И это для div внутри:

.nav{   
 direction: ltr;
}

Это полностью скроет панель прокрутки. Но div все еще прокручивается.