Изменение стиля полосы прокрутки на CSS

Настраиваем стиль полосы прокрутки для документа и элементов с прокручиваемым содержанием в браузерах на платформах WebKit.

by Andrey Dobrovoi

HTML

<div class="container">
  <div class="snippet">
    <div class="custom-scrollbar">
      <p>Банальные, но неопровержимые выводы, а также сделанные на базе интернет-аналитики выводы призывают нас к новым свершениям, которые, в свою очередь, должны быть описаны максимально подробно. Значимость этих проблем настолько очевидна, что перспективное планирование в значительной степени обусловливает важность поэтапного и последовательного развития общества. Приятно, граждане, наблюдать, как действия представителей оппозиции ограничены исключительно образом мышления. Задача организации, в особенности же сплоченность команды профессионалов влечет за собой процесс внедрения и модернизации дальнейших направлений развития.</p>
      <p>Как уже неоднократно упомянуто, ключевые особенности структуры проекта объединены в целые кластеры себе подобных. Как уже неоднократно упомянуто, диаграммы связей представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть ассоциативно распределены по отраслям. Приятно, граждане, наблюдать, как некоторые особенности внутренней политики, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут указаны как претенденты на роль ключевых факторов.</p>
      <p>Задача организации, в особенности же сплоченность команды профессионалов однозначно фиксирует необходимость прогресса профессионального сообщества. Но социально-экономическое развитие влечет за собой процесс внедрения и модернизации системы массового участия. Являясь всего лишь частью общей картины, сделанные на базе интернет-аналитики выводы лишь добавляют фракционных разногласий и указаны как претенденты на роль ключевых факторов. Внезапно, стремящиеся вытеснить традиционное производство, нанотехнологии указаны как претенденты на роль ключевых факторов. Кстати, ключевые особенности структуры проекта объективно рассмотрены соответствующими инстанциями.</p>
    </div>
  </div>
</div>

CSS

*,
:after,
:before {
  box-sizing: inherit;
}

body,
html {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body {
  font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
  background: #f6f7fd;
  color: #324b64;
  line-height: 1.5
}

.container {
  max-width: 64rem;
  padding: 0 2%;
  margin: 0 auto;
}

.snippet {
  position: relative;
  padding: 1rem;
  margin: auto;
  background: #fff;
  border-radius: .25rem;
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
}

.custom-scrollbar {
  background: #f5f6f9;
  height: 200px;
  padding: .75rem .75rem;
  overflow: auto
}

.custom-scrollbar::-webkit-scrollbar {
  width: 1px
}

.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  border-radius: 10px
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .5)
}

JavaScript

/* ========================================================================= */
/*	shurawi --- dbmast.ru ---
/* ========================================================================= */