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

@anna14 · Регистрация: 29.10.2015

Студворк — интернет-сервис помощи студентам

В макете скролбар задуман под знаком "крестик". Скролл появился автоматически за счет правила

CSS
1
2
3
.popup {
    overflow: auto; 
    }

Но он не там где нужно. Как задать ему расположение?
Также не могу разобраться как изменить цвет. В этом же классе задала - цвет не изменился.

CSS
1
2
3
4
.popup {
scrollbar-track-color: #c0c0c0;
    scrollbar-face-color:#6a6a6a;
}

Ниже прикрепляю как я вижу свой скролл в макете и как есть сейчас он на сайте.

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

@Vadim_Lasso · 29.10.2015, 16:50

Цвет: 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;
}

Комментарий модератора

код следует размещать в теме, ссылка на песочницу - бонус
вы уже не первый день на форуме, должны знать об этом

@anna14 · 30.10.2015, 09:22 **[ТС]**

Спасибо, очень помогло!

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@anna14 0 / 0 / 0 Регистрация: 29.10.2015 Сообщений: 3
	30.10.2015, 09:22 [ТС]
	Спасибо, очень помогло! 0

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

Решение