стиль полосы прокрутки css - PullRequest
9 голосов
/ 29 августа 2011

Есть ли способ полностью избавиться от дорожки прокрутки? Или сделать так, чтобы он перекрывал содержимое, а не отталкивал его? Как полосы прокрутки iOS / Lion?

Следующее становится довольно близким, но хотя дорожка прозрачная, содержимое области прокрутки перемещается, и фон страницы просвечивает.

::-webkit-scrollbar {  
    width:8px;
    height:8px;
    -webkit-border-radius: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

::-webkit-scrollbar-thumb {  
    background-color: rgba(053, 057, 071, 0.3);
    width: 6px;
    height: 6px;
    -webkit-border-radius:4px;
}

1 Ответ

1 голос
/ 24 марта 2012

Хм, я думал, что ответил на этот вопрос ранее, возможно, нет:

  • Скрыть переполнение на теле
  • Обернуть весь контент сайта или что вы прокручиваетес div,
  • Свойства Inssde CSS для div (overflow: scroll или overflow-y: scroll).

Теперь вы можете установить трек css на любую непрозрачность, используя rgba (0,0,0,0.3) потому что свиток не является частью тела.

Еще один совет по настройке полосы прокрутки Firefox, если вы хотите поэкспериментировать, состоит в следующем:

  • ВыполнитеПереполнение и наложение полосы прокрутки (через z-index) на прозрачный div любого цвета, который вам нравится,
  • Поместите div на весь раздел прокрутки (возможно, что-то вроде position: absolute; right: 0; еслиВы используете прокрутку для всего окна)
  • Использовать события указателя: нет;на divs css, чтобы сделать его полупрозрачным.

Это даст свитку Firefox немного цвета / текстуры.(Может быть идеально, чтобы прокрутить вправо для сравнения)

Я еще не пробовал, но это выполнимо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...