Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
anna14
0 / 0 / 0
Регистрация: 29.10.2015
Сообщений: 3
1

Как задать расположение и цвет скроллбара?

29.10.2015, 12:26. Просмотров 699. Ответов 2
Метки нет (Все метки)

В макете скролбар задуман под знаком "крестик". Скролл появился автоматически за счет правила
CSS
1
2
3
.popup {
    overflow: auto; 
    }
Но он не там где нужно. Как задать ему расположение?
Также не могу разобраться как изменить цвет. В этом же классе задала - цвет не изменился.
CSS
1
2
3
4
.popup {
scrollbar-track-color: #c0c0c0;
    scrollbar-face-color:#6a6a6a;
}
Ниже прикрепляю как я вижу свой скролл в макете и как есть сейчас он на сайте.
Как задать расположение и цвет скроллбара?


Как задать расположение и цвет скроллбара?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
29.10.2015, 12:26
Ответы с готовыми решениями:

Задать стили (цвет текста) списку. Как задать цвет текста
Помогите задать стили(цвет текста) списку. Как задать цвет текста ? <div...

Цвет скроллбара в iframe
Здрасвствуйте,не подскажите как можно в iframe поменять цвет скроллбара?

Как задать цвет пунктам <li>
первый элементвторой элемент где перед словами первый элемент и второй...

Как задать цвет фона?
Всем добрый вечер. Столкнулся с такой проблемой. Не получается задать задний...

Как элементу задать и цвет и градиент одновременно?
Типа такого, чтобы градиент был над цветомbackground: red, linear-gradient(to...

2
Vadim_Lasso
431 / 350 / 259
Регистрация: 29.11.2011
Сообщений: 627
29.10.2015, 16:50 2
Лучший ответ Сообщение было отмечено anna14 как решение

Решение

Цвет: http://jsfiddle.net/hmartiro/Xck2A/1/
HTML5
1
2
3
4
5
6
7
8
9
10
<div class="flexcroll">
    <p>
        The idea of Rang De was sown in the year 2006 - the same year when Mr. Yunus was awarded the Nobel Prize for his work with Grameen Bank. The motivation for starting Rang De was the belief that the peer to peer lending model could be leveraged to lower the cost of microcredit and reach out to under-served communities. RangDe.Org went live on January 26th 2008 (16:48 hrs to be precise!).
    </p>
    <p>
        <h5>The spirit of Rang De</h5>
 
The name Rang De was decided after a lot of thought. It goes back to the patriotic struggle for Independence. We believe that a similar movement with the same kind of urgency is required to address poverty in India. The words Rang De also denote colour and exuberance and that is the significance we want our efforts to have for the people we reach out to.
    </p>
<div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.flexcroll{ width:400px;
            height:200px;
            overflow:scroll;
           }
.flexcroll{
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}
 
/* Let's get this party started */
.flexcroll::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
.flexcroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
Расположение: http://jsfiddle.net/avrahamcool/uPwfn/1/
HTML5
1
2
3
4
5
6
7
8
9
<h1>Here is the Normal one</h1>
<div class="Container">
    <div class="Content">I'm in Content and I'm very long</div>
</div>
 
<h1>And here is the Flipped one</h1>
<div class="Container Flipped">
    <div class="Content">I'm in Content and I'm very long</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}
 
.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}
 Комментарий модератора 
код следует размещать в теме, ссылка на песочницу - бонус
вы уже не первый день на форуме, должны знать об этом
1
anna14
0 / 0 / 0
Регистрация: 29.10.2015
Сообщений: 3
30.10.2015, 09:22  [ТС] 3
Спасибо, очень помогло!
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
30.10.2015, 09:22

Задать расположение нескольких div
Доброго времени суток форумчане! У меня тут возникла небольшая проблема, есть в...

Задать расположение картинки на веб-странице
Добрый день. Как можно задать координаты расположения картинки на...

Как задать цвет "крестику" стандартного поиска
Ну по сути вопрос в теме: Как задать цвет &quot;крестику&quot; стандартного поиска. Вот...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru