• Главная»
  • Уроки»
  • CSS»
  • Как сделать красивую полосу прокрутки на Вашем сайте?

Как сделать красивую полосу прокрутки на Вашем сайте?

В этом уроке пойдет речь о том, как придать полосе прокрутки вашего сайта определённый цвет.

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

Как её сделать? Очень просто.

Вообще, есть несколько способов.

1. Вставить полный код (приводится ниже) в каждую страницу сайта, где Вы хотите видеть красивую полосу прокрутки.

2. Вставить ссылку на css-файл с кодом.

Рассмотрим оба этих варианта.

Итак, случай первый.

Откройте в блокноте или в Вашем любимом HTML редакторе ту страницу сайта , на которой вы хотите изменить цвет полосы прокрутки.

Где-нибудь между тэгами <head></head>

Вставьте следующие строки:

<style> 
body { scrollbar-face-color:#5997CA;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA;
scrollbar-track-color: #F6F6F6;
scrollbar-arrow-color: #F6F6F6; }
</style>

Что означают эти параметры?

1. scrollbar-arrow-color - цвет стрелки.

2. scrollbar-track-color - цвет подложки.

3. scrollbar-face-color - цвет самой полосы.

4. scrollbar-shadow-color: #ffffff;
          scrollbar-highlight-color: #ffffff;
           цвет разделющей полосы.

5. scrollbar-3dlight-color: #5997CA;
          scrollbar-darkshadow-color: #5997CA;
           цвет внешних границ полосы.

Если Вы не знаете как определить цвет в формате #xxxxxx, то воспользуйтесь программой HTML Colors 2000, которая показывает цвет в этом формате в любом месте экрана. Скачать её можно из раздела программ.

Случай второй.

Откройте в блокноте новый файл и вставьте в него вышеприведенный код, только без тэгов <style></style> и сохраните его под именем scroll.css и поместите в ту же папку, где и подопытная страница.

В тех страницах, где Вы хотите изменить цвет полосы прокрутки, между тэгами <head></head> вставьте следующую строку.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 31 Декабря 2007
Просмотров: 135898
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Мая 2008 12:24
    deep
    "В тех страницах, где Вы хотите изменить цвет полосы прокрутки, между тэгами <head></head> вставьте следующую строку." по моему здесь чего-то не хватает!
  • 14 Мая 2008 09:25
    deep
    Единственная поправочка: при создании в Dreamweaver CS3 автоматически вставляется строка "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">", дак чтоб скроллы работали нужно удалить --"http://www.w3.org/TR/html4/loose.dtd"--.
  • 20 Мая 2008 19:49
    Василий
    Спасибо deep за то что он решил мою проблему на счет этой прокрутки она у меня раньше не появаялась а все не мог решить почему оказалась эта строка мешала "http://www.w3.org/TR/html4/loose.dtd"
  • 25 Мая 2008 01:05
    Серьга
    Помоготе братья разобраться... при удалении строчки "http://www.w3.org/TR/html4/loose.dtd" полоса отображаеться, но сьезжает правое меню вот линк: http://axule.ru если не удалять то не сьезжает ничего
  • 29 Мая 2008 00:10
    Alex
    vse ok!!! vstavlyaem mezhdu <tr><td> dlinnyi text... </td></tr> й
  • 1 Июня 2008 00:06
    Василий
    На мое сайте все хорошо отображается и полоска подобрана под стиль сайта. Ссылка www.Birusinsk.com Сайт был создан с помощью видео курсов Евгения Попова.
  • 12 Июня 2008 16:32
    RimuRichi
    Всем спасибо! Урок отличный...
  • 4 Августа 2008 20:10
    Vova
    У меня не работает!!!
  • 5 Августа 2008 22:03
    Milan
    Vova это функция не работает в Mozilla Firefox. В Opera и IE это уже работает... Спасибо Евгений за урок...
  • 30 Августа 2008 15:35
    Дима
    Спасибо за урок, понятно и легко главное)
  • 19 Сентября 2008 16:24
    GreekOff
    Вообще ты парень молодец. Пробился в жизни. Выражаю Тебе свое уважение и желаю удачи.
  • 13 Октября 2008 01:57
    Святослав
    Спасиба за урок, учитель =)
  • 1 Ноября 2008 07:58
    Дмитрий
    Отличный урок. Спасибо!
  • 3 Декабря 2008 18:07
    Василий
    Данная функция это всеволиш сделать то чего нету у других. Во-многих случаях можно обойтись и бес этой функции. Между прочим на Firefox данная фишка не работает так как она не прописана с спецификации www.
  • 1 Января 2009 08:33
    Владимир
    Mozilla Firefox - это мазила , этот браузер фактически не доработан , в неём есть куча пенелек фишек всяких но изначально свою функцию браузеа он выполняет погано :) не советую его вообще использовать , а тот кто его использует это их проблеммы что у них проблеммы с отображение чего либо , пусть обращаются в службу поддержки Mozilla Firefox раз им нравится этот браузер, а мы как програмисты полжны только сайты делать , у кого не отображается путь там и лечатся , у нас всё отображается IE и OPERA и этого вполне достаточно ! Рекомендую это указывать на сайте если у вас проблеммы то обращайтесь в службу поддержки браузера, указав ссылку на наш сайт и описав проблемму, либо довольствуйтесь так как есть мы вам браузер не навязывали !
  • 14 Января 2009 14:09
    Дмитрий
    У меня теперь весь текст 16 шрифтом пишется. А в стилях 12 стоит. В чём дело?
  • 14 Января 2009 14:14
    Дмитрий
    Я понял в чём проблема =) просто в абзац весь текст нада запихнуть =)
  • 7 Февраля 2009 20:53
    streetstyle
    Насколько я понял следующая строчка это строка в которой прописывается прикрепления таблицы стилей или нет
  • 2 Марта 2009 17:29
    Hap1K
    oO kpyTo! спасибо)
  • 5 Мая 2009 21:21
    ABCD
    блин! раньше получалось, теперь - нет!
  • 5 Мая 2009 21:47
    ABCD
    Просто стандартная полоса прокрутки!!! Открываю старые работы - работает; копирую в новые - нет!!!
  • 5 Мая 2009 22:21
    Сергей_Патин
    ABCD, Проверьте, чтобы доктайп такой был: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Тогда должно работать.
  • 7 Мая 2009 08:49
    ABCD
    Сергей, у меня так и есть! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • 11 Ноября 2011 11:35
      adaev_kazbek
      Ты комментарии вверху почитай, да и здесь посмотри разницу Строка должна быть такой - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Ты пишешь у меня такая - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Ничего лишнего не видишь? Удали на фиг эту строку - "http://www.w3.org/TR/html4/loose.dtd"
  • 7 Мая 2009 08:50
    ABCD
    Пропустите комментарии через stripslashes()!
  • 16 Июня 2009 17:41
    budko
    У меня тоже не работает!!!
  • 16 Июня 2009 19:25
    leo
    Спасибо!!! Давно искал.
  • 1 Августа 2009 10:20
    asim
    Не а не работает, все перепробывал.
  • 5 Октября 2009 20:08
    Magneto
    Не работает в : Chrome, Safari, Firefox. Работает в : Explorer, Opera. Прошу заметить что селектор scrollbar не задокументирован в CSS 2.1 !
  • 24 Августа 2010 14:06
    forest_elff
    такое работает только в ИЕ!!!!!!!!!!!!!!!!! так что GO TO JQ, если хотите кросс-браузерное решение проблемы
  • 10 Сентября 2010 09:28
    aramok
    vse rabotaet !!! Keuto !!!! no kak mne izmenit cvet "полосу прокрутки" browsera ????
  • 30 Сентября 2010 20:00
    genixxx
    Не работает: IE, Opera, Firefox, а учитывая кол-во жалующихся что не работает, это уже не такая простая вещь как декларирует автор сего урока. Требуется повторить урок с кроссбраузерным решением.
  • 7 Ноября 2010 15:34
    prom
    Угу, для IE все гуд, для SeaMonkey, а это кажется дочка мозиллы - нет. А так довольно эффектно. Народ требует доработки!!!
  • 7 Ноября 2010 15:50
    prom
    Цитата из предыдущего поста: "Рекомендую это указывать на сайте если у вас проблеммы то обращайтесь в службу поддержки браузера, указав ссылку на наш сайт и описав проблемму, либо довольствуйтесь так как есть мы вам браузер не навязывали !" Только сейчас увидел. Это кто так отвечает? Автор урока? Редкое грубиянство. Достаточно было объявить, что данный код гарантированно работает для таких-то броузеров. И вопросов бы и не было.
  • 9 Марта 2011 15:39
    ushim
    в Хроме работает?
  • 28 Июля 2011 16:33
    Salvation
    Нигде не работает и вообще, если решение не кросс-бразуерное - это не решение. Что-попало, а не урок.
    • 11 Ноября 2011 11:37
      adaev_kazbek
      Если НИГДЕ не работает? Может проблема не в уроке и решении? Может она где-то рядом в исполнителе. Все работает отлично, спасибо Евгений
  • 25 Декабря 2011 22:38
    Donemar
    --"http://www.w3.org/TR/html4/loose.dtd"--. Вот эту вот строчку нужно вообше удалять а то она не то ко скролы не даёт делать а и попапы как то с левой стороны и покарёжиные делаются иза неё 1
  • 25 Декабря 2011 22:39
    Donemar
    Они не хотят работать в фаерфоксе и гугл хроме
    • 30 Марта 2012 14:58
      VerbaRoman
      Не работает!(((
      • 21 Июня 2015 00:16
        Irlandec
        Это как ?
  • 19 Июня 2012 13:40
    semen_orlov
    У меня MAC всего этого не видно, тут и так красиво)))
  • 8 Ноября 2013 14:47
    kakabal
    ничего нету <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> чё делать?
  • 23 Июня 2014 10:04
    wader
    Без JS не обойтись. Такой способ ниразу не мультибраузерный.
  • 14 Марта 2015 20:38
    maasika7
    -1: это же работает только в Internet Explorer, нафига мне это знать, если использовать это - неадекватно? только время потратила. буэ.
  • 31 Января 2016 23:23
    dunlopov
    еще можно просто в стили добавить вот так: ::-webkit-scrollbar {width: 12px;height: 12px;} ::-webkit-scrollbar-track-piece {background:rgba(0,0,0,0);} ::-webkit-scrollbar-thumb:vertical {height:10px;background:#272c35;} ::-webkit-scrollbar-thumb:vertical:hover {background:#71CA55;} ::-webkit-scrollbar-thumb:horizontal {width:10px;background:#272c35;} ::-webkit-scrollbar-thumb:horizontal:hover {background:#71CA55;}
^ Наверх ^