margin-left для полосы прокрутки в Chrome

#html #css #прокрутка

Имеется полоса прокрутки:



#parent {
  height: 200px;
  width: 300px;
  overflow-y: auto;
}

#child {
  height: 500px;
  width: 100%;
  background: teal;
}

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

 ::-webkit-scrollbar-track {
  background: #f6f5f3;
}

 ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

  






Хочу сделать, чтобы между полосой прокрутки и контентом (блок #child) было расстояние
в 2px. По сути хочу написать ::-webkit-scrollbar { margin-left: 2px; }. Так не работает.
Пробовал добавить padding-right: 2px к элементу #parent, но тогда если полосы прокрутки
нет (то есть в блоке #child мало содержимого (в примере высота #child фиксирована,
но в реальном проекте зависит от содержимого)), то будут лишние 2px пустого места.
Как добавить расстояние 2px между полосой прокрутки и блоком #child?

Обновление:

У блока #parent имеется свойство overflow-y: auto;. То есть появится полоса прокрутки
или нет зависит от высоты блока #child. В примере высота #child фиксирована, однако
в реальном проекте зависит от содержимого (там динамически подгружаемый текст, много
текста => появится полоса прокрутки, мало текста => не появится). Это всё к тому, что
если полосы прокрутки нет, то решение не должно влиять на отображение. То есть  хочется
добавить 2px свободного места между контентом и полосой прокрутки, если полоса прокрутки
есть, и ничего не добавлять, если её нет.
    

Ответы

Ответ 1

#parent {
  height: 200px;
  width: 300px;
  overflow-y: auto;
}

#child {
  height: 500px;
  background: teal;
}

::-webkit-scrollbar {
  width: 10px;  // 8px (ширина полосы прокрутки) + 2px (расстояние между полосой
прокрутки и контентом)
}

::-webkit-scrollbar-track {
  background: #f6f5f3;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-left: solid 2px #fff;
}

  




Ответ 2

Может, не так понял, но возможно, это имелось ввиду.
Использована функция calc.



#parent {
  height: 200px;
  width: 300px;
  overflow-y: auto;
}

#child {
  height: 500px;
  width: calc(100% - 2px);
  background: teal;
}

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

 ::-webkit-scrollbar-track {
  background: #f6f5f3;
}

 ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}