Добавить в закладки
Отличный хостинг от 159 рублей

Полоса прокрутки css стилями, как оказывается правится очень просто. Да, не во вссех браузерах оно поддерживается, однако в современных webkit все очень даже хорошо.

Обычно, в моих проектах не требуется подобной стилизации ибо и не просят, однако мое решение выступает весьма приятным бонусом заказчику. Когда все итак хорошо, полоса прокрутки стилизованная «как надо» всегда дополняет проект и дает вам не только +1 к карме, но и личный «респект» от заказчика, что, как вы и сами понимаете, круто.

Вроде бы такой незначительный шаг, однако может многое сказать о вас, как о профессионале, который заботится о мелочах.

Полоса прокрутки css стилями без строчки JS

Здесь все очень просто. Изначально мы подключаем стили глобально для всего проекта. Вставляем следующий код:

::-webkit-scrollbar {
    /* Ширина */
    width: 10px;
}
/* Стили полосы */
::-webkit-scrollbar-track {
    background-color: #fff;
    -webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.1);
}
/* Стили бегунка */
::-webkit-scrollbar-thumb {
  background-color: lightgray;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: orange;
}

Как видите, нет ничего сложного. В самом верху стилей вставьте это и стилизуйте, как будет угодно. Далеко не все свойства поддерживаются, однако фон, скругления, рамки и базовые стили поменять можно и даже :active, :focus, :hover можно реализовать без проблем…

Вообще, решил написать заметку, когда наткнулся на очень интересную запись про стилизацию: https://css-tricks.com/the-current-state-of-styling-scrollbars/

Настоятельно рекомендую ознакомится ибо там представлены весьма прогрессивные решения для стилизации. К примеру, появление полосы прокрутки при наведении на блок. Это действительно здорово. Зачастую придется дополнить свои css стили javascript кодом, однако если ходите прям здоровский вариант, то можно попробовать.

Кстати да, вы можете стилизовать не только глобально, но и локально, к примеру только определенный блок на сайте. Делается это точно так же, только применяется к классу или id элемента…

Я же сторонник быстрых и не требовательных решений: скопировал — вставил. И мои наброски выше, как раз из этого числа. Пользуйтесь и удачи!

Доступный VPS