Как сделать scrollbar полупрозрачным и не занимающим место?

Для того чтобы сделать полупрозрачный scrollbar, который не занимает место, можно воспользоваться псевдоэлементами CSS. Спецификация CSS не предоставляет прямых средств для стилизации scrollbar таким образом, однако, вы можете использовать свойства -webkit-scrollbar и -ms-scrollbar для браузеров Chrome и Edge соответственно.

Пример реализации для Webkit браузеров (Chrome, Safari):

/* Убираем scrollbar */
::-webkit-scrollbar {
  display: none;
}

/* Псевдоэлемент, который будет создавать "полупрозрачный" scrollbar */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

/* Псевдоэлемент, который будет создавать прозрачный трек scrollbar */
::-webkit-scrollbar-track {
  background: transparent;
}

Пример реализации для браузера Edge:

/* Убираем scrollbar */
::-ms-scrollbar {
  display: none;
}

/* Псевдоэлемент, который будет создавать "полупрозрачный" scrollbar */
::-ms-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

/* Псевдоэлемент, который будет создавать прозрачный трек scrollbar */
::-ms-scrollbar-track {
  background: transparent;
}

Учитывайте, что использование стилей для scrollbar не является рекомендованным из-за их поддержки на различных браузерах. Кроме того, изменение стилей scrollbar может нарушить пользовательский опыт и доступность, поэтому рекомендуется обдуманно применять такие техники.