Прозрачная полоса прокрутки css

Теперь используйте этот код (и многие его варианты), но дорожка прокрутки приобретает темно-серый цвет, что-то вроде # 222222 или около этого. Найдите много примеров, но все они дают одинаковый результат. Opera, Chrome и Firefox показывают эту ошибку. Как исправить?

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: transparent;
}

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #000000;
}

Ответы

Ответ 1

С чистым css невозможно сделать его прозрачным. Вы должны использовать прозрачное фоновое изображение следующим образом:

::-webkit-scrollbar-track-piece:start {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

::-webkit-scrollbar-track-piece:end {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

Ответ 2

    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll; // manage scrollbar content overflow settings
    }
    .scrollable-content::-webkit-scrollbar {
      width:30px; // manage scrollbar width here
    }
    .scrollable-content::-webkit-scrollbar * {
      background:transparent; // manage scrollbar background color here
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
    }

Ответ 3

Чтобы управлять background-color полосы прокрутки, вам нужно нацелиться на основной элемент, а не на -track.

::-webkit-scrollbar {
    background-color: blue;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

Мне не удалось сделать его transparent, но мне удалось установить его цвет.

Поскольку это ограничено webkit, все же предпочтительнее использовать JS с полифиллом: CSS-полоса прокрутки в div

Ответ 4

Попробуйте этот, он отлично работает для меня.

В CSS:

::-webkit-scrollbar
{
    width: 0px;
}
::-webkit-scrollbar-track-piece
{
    background-color: transparent;
    -webkit-border-radius: 6px;
}

и вот рабочая демонстрация: https://jsfiddle.net/qpvnecz5/

Ответ 5

Если вы используете это:

body {
    overflow: overlay;
}

Затем полоса прокрутки также будет иметь прозрачный фон по всей странице. Это также поместит полосу прокрутки внутрь страницы вместо того, чтобы убрать часть ширины, чтобы вставить ее в полосу прокрутки.

Вот демонстрационный код. Я не смог вставить его в кодовую ручку или jsfiddle, к сожалению, мне потребовалось некоторое время, пока я не понял, но они не показывают прозрачность, и я не знаю почему.

Но положить это в HTML файл должно быть хорошо.

<!DOCTYPE html>
<html>
<style>
html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow: overlay;
}

.div1 {
  background: grey;
  margin-top: 200px;
  margin-bottom: 20px;
  height: 20px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
</style>
  
<body>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>
  

</body>
</html>

Ответ 6

Просто установите display:none; в качестве атрибута в вашей таблице стилей;)
Это лучше, чем загружать картинки даром.

body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  background-color: transparent;
}

body::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  opacity: 0.2;

  /* Here */
  display: none;

  -webkit-border-radius: 0;
  -webkit-border-bottom-right-radius: 14px;
  -webkit-border-bottom-left-radius: 14px;
}

body::-webkit-scrollbar-thumb:vertical {
  height: 50px;
  background-color: #333333;
  -webkit-border-radius: 8px;
}

Ответ 7

если у вас нет содержимого с шириной 100%, вы можете установить цвет фона дорожки на тот же цвет фона тела