Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.72/18: Рейтинг темы: голосов - 18, средняя оценка - 4.72
 Аватар для useruser
166 / 90 / 38
Регистрация: 29.06.2015
Сообщений: 1,100

Кастомизация scrollbar

05.03.2019, 13:36. Показов 3928. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Мне нужно кастомизировать scrollbar. Причем не только в div. Желательно ещё в textarea.
В хроме все работает. А в мозилле (и наверно других браузерах), уже нет. Нет кроссбраузерности.


Код на примере div (в textarea всё будет аналогично)
https://jsfiddle.net/esjnd317/1/

HTML5
1
2
3
<div class="crypto_ui_3-scrollable_div_1">
Текст<br><br><br><br><br><br><br><br><br><br><br><br>
</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
.crypto_ui_3-scrollable_div_1 {
height:60px;
overflow-x: hidden;
overflow-y: scroll;
font-size: 0.875rem;
padding: 0.625rem;
border: 1px solid #353343;
}
 
 
.crypto_ui_3-scrollable_div_1::-webkit-scrollbar {width: 0.375rem;}
.crypto_ui_3-scrollable_div_1::-webkit-scrollbar-button {width: 0;height: 0;}
.crypto_ui_3-scrollable_div_1::-webkit-scrollbar-corner {background: transparent; }
.crypto_ui_3-scrollable_div_1::-webkit-scrollbar-thumb:hover {background: #2aa4ff; }
.crypto_ui_3-scrollable_div_1::-webkit-scrollbar-thumb:active {background: #2aa4ff; }
 
.crypto_ui_3-scrollable_div_1::-webkit-scrollbar-thumb {
background: #1b8ee3;
border: 0px none;
border-radius: 0px; }
 
.crypto_ui_3-scrollable_div_1::-webkit-scrollbar-track {
background: #353343;
border: 0px none;
border-radius: 0px; }

Как можно кроссбраузерно кастомизировать scrollbar в большинстве элементов div/textarea/... ?
Можно не только на чистом сss (jquery).
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
05.03.2019, 13:36
Ответы с готовыми решениями:

кастомизация select
Приветствую Нужна помощь в оформление селекта &lt;div class=&quot;i&quot;&gt; &lt;label&gt;Я:&lt;/label&gt;&lt;br&gt; ...

Кастомизация Bootstrap
Зачем кастомизировать Bootstrap. Размер и так совсем небольшой. Не является ли это масло масленное. Я не спорю необходимо настроить...

Кастомизация checkbox
Здравствуйте, уважаемые форумчане! Не знаю, правильно ли я обозначил тему, но вопрос, собственно, такой: как воплотить сей вид...

3
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3963 / 2081 / 832
Регистрация: 13.03.2010
Сообщений: 6,866
05.03.2019, 16:31
nicescroll.js
0
 Аватар для useruser
166 / 90 / 38
Регистрация: 29.06.2015
Сообщений: 1,100
06.03.2019, 06:43  [ТС]
Цитата Сообщение от gogolik Посмотреть сообщение
nicescroll.js
Там свойства скролла задаются вот так.
JavaScript
1
2
3
4
5
6
7
$(".do-nicescrol").niceScroll({
  cursorcolor:"aquamarine",
  cursorwidth:"24px",
  background:"rgba(20,20,20,0.3)",
  cursorborder:"1px solid aquamarine",
  cursorborderradius:0
});  // a world full of color!
У меня же через css. Использую Sass + Prepros.
При небольшом изменении css искать там код и заново копипастить в nicescroll - вообще не вариант. (
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3963 / 2081 / 832
Регистрация: 13.03.2010
Сообщений: 6,866
06.03.2019, 09:56
useruser, делайте всё сразу через nicescroll, если хотите кроссбраузерности. Не webkit браузеры пока не умеют в изменения скроллбара через css. Не хотите возиться со скриптами - сидите на стандартных скроллбарах
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
06.03.2019, 09:56
Помогаю со студенческими работами здесь

Кастомизация input=number
Вопрос в следующем...Можно ли используя голый CSS. Изменить сей Input так как я хочу? Например что-то в таком стиле Спасибо:)

Кастомизация ползунка на HTML5
Добры день. Поделитесь ссылкой пожаулйста, у кого есть, как кастомизировать полузнки на HTML5 Нужно сам ползунок сделать круглым...

Кастомизация кнопок от Вконтакте, Facebook, Twitter и MAIL
Кнопки &quot;Поделиться ссылкой&quot;, &quot;Новый твит&quot; и т.п. Как привести эти кнопки к общему стилю? Хороший пример

Scrollbar
Как мне сделать так чтобы, когда я наводил на место скролбара мышкой, он появлялся, уводил мышку с него он изчезал?

Как убрать scrollbar?
Доброе время суток! Подскажите новичку,как убрать scrollbar на странице : http://oldcap.narod.ru и возможно-ли это не увеличивая значение...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru