X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать красивую полосу прокрутки?
serjik_hb
serjik_hb
Topic Starter сообщение 29.9.2010, 1:01; Ответить: serjik_hb
Сообщение #1


Вот в процессе работы над сайтом озадачился сделать красивую полосу прокрутки, но к сожалению никак не могу ее оформить в нужном для меня стиле. Подскажите, как оформить css чтобы полоса прокрутки выглядела не просто цветной (какобычно делают путем добавления в css таблицы стилей скрола), а чтобы кнопкам и самому бегунку можно было прикрутить картинку формата png ? Это нужно чтоб по замыслу бегунок имел определенную форму и раскраску а не просто какой то однородный цвет.

Пытаясь это реализовать создал файл scroll.css так:
Взял за основу стандартный код scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA;
scrollbar-track-color: #000000;

и внес изменения прописав пути к файлам

body { scrollbar-face-color: url( sciter://css/images/scrollknob_m.png );
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA;
scrollbar-track-color: #000000;
scrollbar-arrow-color: url( sciter://css/images/scroll_back.png );
}

но к сожалению изменения видны только там где указан цвет,где указан путь к файлу png изменнений нет. Что делаю не так подскажите плиз...
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
RayOfLight
RayOfLight
сообщение 29.9.2010, 1:57; Ответить: RayOfLight
Сообщение #2


Ничего так не выйдет, потому что полосы прокрутки не являются как таковыми элементами страницы.
Но можно с помощью JS замутить свои полосы, с блекджеком и остальным.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 29.9.2010, 7:10; Ответить: Alcorn
Сообщение #3


Самодельная полоса прокрутки сам по себе сложный элемент, вычисление размеров ползунка относительно прокручиваемого контента, управление кнопками вниз/вверх, drag&drop самого ползунка и привязка к прокрутке контента, + колёсико мыши и т.д. и т.п.

Можете поискать готовые библиотеки скриптов, вероятно попадётся что-нибудь.

А обычная полоса прокрутки - элемент браузера и часто неподдаётся изменениям.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
serjik_hb
serjik_hb
Topic Starter сообщение 29.9.2010, 17:56; Ответить: serjik_hb
Сообщение #4


да я пытался уже готовую прикрутить которую взяли из модуля skrollbar для joomla, но все равно ничего не вышло . В нем таблица css выглядит так:

/* © 2007 YOOtheme.com */

div.blank-h div.yoo-scroller {
}

/* panel */
div.blank-h div.yoo-scroller .panel-container {
padding: 0px 0px 10px 0px;
}

div.blank-h div.yoo-scroller .panel-container-bg {
overflow: hidden;
}

div.blank-h div.yoo-scroller div.panel {
overflow: hidden;
}

div.blank-h div.yoo-scroller div.panel div.slide {
float: left;
overflow: hidden;
}

div.blank-h div.yoo-scroller div.scrollarea {
margin: 0px 20px 0px 20px;
background: url(styles/blank-h/images/scrollarea_m.png) 0 0 repeat-x;
cursor: pointer;
}

div.blank-h div.yoo-scroller div.scrollarea-l {
background: url(styles/blank-h/images/scrollarea_l.png) 0 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollarea-r {
background: url(styles/blank-h/images/scrollarea_r.png) 100% 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollbar {
float: left;
}

div.blank-h div.yoo-scroller div.scrollknob {
margin: 2px 0px 2px 0px;
min-width: 10px;
background: url(styles/blank-h/images/scrollknob_l.png) 0 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollknob-r {
padding: 0px 10px 0px 10px;
background: url(styles/blank-h/images/scrollknob_r.png) 100% 0 no-repeat;
}

div.blank-h div.yoo-scroller div.scrollknob-m {
height: 14px;
background: url(styles/blank-h/images/scrollknob_m.png) 0 0 repeat-x;
}

div.blank-h div.yoo-scroller div.forward, div.blank-h div.yoo-scroller div.back {
width: 21px;
height: 18px;
float: left;
}

div.blank-h div.yoo-scroller div.forward {
background: url(styles/blank-h/images/scroll_forward.png) 0 0 no-repeat;
}

div.blank-h div.yoo-scroller div.back {
background: url(styles/blank-h/images/scroll_back.png) 0 0 no-repeat;
}

Может ее как то можно прикрутить к моей таблице стилей? Если кому интересно полностью этот скрипт с файлами в прикрепленном архиве.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Как перестать толстеть?
185 DocAnton64 9030 Сегодня, 0:36
автор: Silverspam
Открытая тема (нет новых ответов) Как продать сайт
8 kolver 399 Вчера, 19:44
автор: Rybakin
Открытая тема (нет новых ответов) Как получить доступ к GPT-3
pro100blogger.com - подробно о Google
2 vvovvo 160 Вчера, 0:40
автор: vvovvo
Открытая тема (нет новых ответов) Спецпредложение "Коробка Битрикс24 в облаке: как перенести и сколько это стоит"
9 Tucha 833 25.11.2020, 11:47
автор: Tucha
Горячая тема (нет новых ответов) Как мы профукали форум?
67 wep 6861 24.11.2020, 12:59
автор: Mukis


 



RSS Текстовая версия Сейчас: 27.11.2020, 0:42
Дизайн