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

364

02 июня 2017, 10:40

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

#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; 
}

<div id="parent"> 
  <div id="child"></div> 
</div>

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

Обновление:

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

Answer 1

#parent { 
  height: 200px; 
  width: 300px; 
  overflow-y: auto; 
} 
 
#child { 
  height: 500px; 
  border-right: solid 5px #fff; 
  background: teal; 
} 
 
::-webkit-scrollbar { 
  width: 10px;  // 8px (ширина полосы прокрутки) + 2px (расстояние между полосой прокрутки и контентом) 
} 
 
::-webkit-scrollbar-track { 
  background: #f6f5f3; 
} 
 
::-webkit-scrollbar-thumb { 
  background: #c1c1c1; 
  border-left: solid 2px #fff; 
}

<div id="parent"> 
  <div id="child"></div> 
</div>

Answer 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; 
}

<div id="parent"> 
  <div id="child"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как изменять админку в django самостоятельно

Я новичек в Django и хочу узнать как я могу редактировать админку Django самостоятельно, а не методами из коробкиК примеру изменять стили, менять...

591

HTML

Получение опыта, помощь, работа в команде [требует правки]

Где найти такие проекты, что бы можно было поучаствовать в них как программистЯ знаю php,MySQL, html, WordPress есть опыт но он не большой

211

HTML

Htaccess в сайте

Я бы хотел спросить что надо для безопасности и вообще что надо для сайта моего у меня indexphp contact

348

HTML

CSS раскладывающийся список

Как сделать именно такое выпадение (раскладывающееся, как гармошка)? Какие стили или анимацию следует использовать?

266