• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Меняем вид полосы прокрутки
Меняем вид полосы прокрутки
workman
Воскресенье, 28 Июня 2015 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Написал такие простые стили которые вам полностью поменяют полосу прокрутки на сайте.
Демо пример смотрите у меня на сайте.

Теперь как сделать так у себя. Берем вот этот код:
Код
::-webkit-scrollbar { width: 6px; background: #F49A20 !important;}
::-webkit-scrollbar-thumb { background: #1607FC !important;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #000 !important;}
::-webkit-scrollbar-thumb:horizontal {height: 6px; background: #F49A20 !important;}

Заходим сюда: ПУ » Главная » Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS) » В самый низ ставим и жмем "Сохранить". Далее проходим на свой сайт, обновляем страницу и видим то что Вы видели у меня на сайте.

А теперь разжуем как настроить под ваш сайт: biggrin



Данный код, отвечает за сам фон, где вы цвет меняете под свой дизайн
Код
::-webkit-scrollbar{ width: 6px; background: #F49A20 !important;}
Вот этот - цвет бегунка, его меняете на свое усмотрение
Код
::-webkit-scrollbar-thumb { background: #1607FC !important;border-radius: 10px;}
Это тоже бегунок, только когда на него наводите мышкой чтобы передвинуть, он поменяет цвет. Его также на свое усмотрение, я поставил черный
Код
::-webkit-scrollbar-thumb:hover {background: #000 !important;}
Ну и последний код, отвечает за то, если у вас есть на сайте скролинг горизонтальный. В нем ничего менять не нужно, он автоматически заточен под первый
Код
::-webkit-scrollbar-thumb:horizontal {height: 6px; background: #F49A20 !important;}


На этом все...

Хотя нет ... Если Вы в верхнем меню, нажмете на кнопку "Загрузить картинку" и авторизуетесь на форуме, то увидите как именно работает данный код через который можно добавлять картинки на свой сайт.
Своего рода, собственный фотохостинг для удобного добавления картинок в сообщения.
Прикрепления: 8204568.jpg (31.3 Kb)


Сообщение отредактировал
workman - Воскресенье, 28 Июня 2015, 11:17
Страна: (RU)
kredit-oformi
Воскресенье, 28 Июня 2015 | Сообщение 2
Оффлайн
Vip
Сообщений:1975
Награды: 5
workman, неплохо неплохо smile
Страна: (RU)
๖ۣۜInspire
Воскресенье, 28 Июня 2015 | Сообщение 3
Оффлайн
Vip
Сообщений:598
Награды: 3
вот только меняется она в браузерах на вебките только



Моё портфолио
Страна: (RU)
workman
Воскресенье, 28 Июня 2015 | Сообщение 4
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата ๖ۣۜInspire ()
вот только меняется она в браузерах на вебките только

Протестирован на Гугл Хроме, Яндексе, Уране ... Все работает
Страна: (RU)
Kosten
Воскресенье, 28 Июня 2015 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
workman, такие прокрутки называю понтавитые так в дизайн а понту нет biggrin
Страна: (RU)
workman
Воскресенье, 28 Июня 2015 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
такие прокрутки называю понтавитые так в дизайн а понту нет

НУ просто у некоторых сайты из за широкой прокрутки начинают дергаться в сторону.
Хотя можно конечно и это убрать, всего-лишь воткнув такой малюсинький код
Код
html,body{overflow-y:scroll;}
Страна: (RU)
๖ۣۜInspire
Воскресенье, 28 Июня 2015 | Сообщение 7
Оффлайн
Vip
Сообщений:598
Награды: 3
workman, потому что они на вебкит, а как же мозилла, ие?



Моё портфолио
Страна: (RU)
workman
Воскресенье, 28 Июня 2015 | Сообщение 8
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Я так понимаю что разные вещички стоит прекращать делиться???
Чтобы не поставил, все не так...
Ну сделай сам так, чтобы было видно кругом и везде и поделись с нами. И тем более пишешь про IE ...
Какой дурак пользуется сегодня ослом тормозящим??
Страна: (RU)
Kosten
Воскресенье, 28 Июня 2015 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Цитата workman ()
Я так понимаю что разные вещички стоит прекращать делиться???


Что за бунт? surprised

Безусловно делится, если одному или двум не нравится, это не означает, что всем не нравится.

Так как заливаешь что то оригинальное, что факт на лицо. wink
Страна: (RU)
workman
Воскресенье, 28 Июня 2015 | Сообщение 10
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
Что за бунт?

Неее... Никакого бунта... Просто когда если делает человек сам, то это вряд-ли должно обсуждаться.
Пусть твой коллега покажет что именно он сделал самостоятельно без копирования откуда-либо biggrin biggrin biggrin
Страна: (RU)
Kosten
Воскресенье, 28 Июня 2015 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Цитата workman ()
Пусть твой коллега покажет что именно он сделал самостоятельно без копирования откуда-либо


Мы тут все взрослые и не будем меряется причендалами, давайте оставил этот удел школьникам и не будем отбирать у них хлеб.

Не когда не будет обсуждение кого небудь.

Удачной охоты брат wink
Страна: (RU)
๖ۣۜInspire
Понедельник, 29 Июня 2015 | Сообщение 12
Оффлайн
Vip
Сообщений:598
Награды: 3
workman, есть такое понятие как критика. я имею право делится впечатлением об продукте, и ты должен воспринимать это правильно, без бомбёжки(если ты не воинствующий школоло конечно же). Я не навязываю своё мнение кому-либо, делай как хочешь, но я просто говорю как было бы лучше.
Цитата
Какой дурак пользуется сегодня ослом тормозящим??

Последние версии ие вполне работоспособны и им пользуются.
Цитата
Пусть твой коллега покажет что именно он сделал самостоятельно без копирования откуда-либо

Например в данный момент я делаю систему управления сайтом на PHP, которая располагается на этом хосте




Моё портфолио
Страна: (RU)
workman
Понедельник, 29 Июня 2015 | Сообщение 13
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата ๖ۣۜInspire ()
Последние версии ие вполне работоспособны и им пользуются.

Пройдя опрос в сети я еще раз убедился в том что народ в основном сидит с бр Яндекс, так как он быстрее и очень мало кто использует IE.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Меняем вид полосы прокрутки
  • Страница 1 из 1
  • 1
Поиск: