Как изменить полосу прокрутки блока (высоту или скрыть за border)?

Question

[Артем Василенко]

Подскажите как изменить полосу прокрутки в блоке?
Я добился небольшого эффекта за счёт применения градиента и сверху и снизу просто прозрачный цвет.
Есть ли другой способ?

Comments

[Ankhena]

Обрежьте родителем. Да, придется сделать еще обертку.
Правда, и на правом скрине довольно странный вид. Я бы предложила дизайнеру ещё подумать.

Answer 1

[Артем Василенко]

Решение нашёл сам.

.wrapper {
  border-radius: 10%;
  overflow: hidden;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border: 2px solid #ccc;
}
 
.block {
  height: 100%;
  overflow-y: scroll;
  font-size: 24px;
}

<div class="wrapper">
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus illum, reprehenderit eos architecto quia esse nemo explicabo incidunt voluptas tempore. Sit iste itaque officiis eius molestias dolorem voluptas odio doloribus.
  </div>
</div>