Как изменить цвет полосы прокрутки в хроме
Обновлено: 05.07.2024
Хочу рассказать об одной, на мой взгляд, удобной и красивой вещи - возможности скрытия полосы прокрутки в браузере Google Chrome.
Для корректности следуют отметить, что версия браузера 69.0.3497.92 (Официальная сборка), (64 бит).
Данная возможность относится к экспериментальным или бета версиям функционала или настроек. Для активации необходимой перейти на страницу chrome://flags/ . Лучше это сделать путем копирования и вставки в омнибокс (адресная строка с расширенной функциональностью, да, давайте называть вещи своими именами, учиться и узнавать новое. Компьютерная грамотность довольно-таки полезная штука😊) данной ссылки.
В открывшейся вкладке через поисковую строку находим параметр Overlay Scrollbars . Кстати, присмотритесь к "скролбару" справа на вашей странице или снимке экрана снизу.
Как видно, по нашему поиску найдено целых три параметра:
Overlay Scrollbars
Flash Overlay Scrollbars After Any Scroll Update
Flash Overlay Scrollbars When Mouse Enter
В выпадающим меню всех трех настроек нужно выбрать Enabled и RELAUNCH NOW для активации взнесенных изменений. При перезагрузке браузера все ваши окна восстановятся.
После перезагрузки мы видим, какие функции у нас активны. Так же стали заметны изменения в полосе прокрутки.
. её просто нет. Появляется scrollbar в уменьшенном виде при использования колесика мыши. При наведении курсора полоса прокрутки увеличивается в размерах. Цвет полосы будет противоположным цвету фона страницы (темная или светлая.) Работает на Windows, Linux, Chrome OS.
Возникает вполне логичный вопрос: "Если эта штука работает, экономит свободное место и просто красиво выглядит, то почему она не активна по умолчанию? " На мой взгляд дело в не удобности изначального скрытия элементов управления на незнакомых ресурсах и понимании того, что браузером пользуется разные группы людей. Используя эту настройку 3+ месяцев сталкивался с подобным на новых для себя сайтах, особенно где присутствует еще и и горизонтальная прокрутка. Однако такая настройка имеет право на существование и со временем прежний вид полосы прокрутки будет вам казаться громоздким и устаревшим. Минимализм во всей красе!
На этом всё! Спасибо, что дочитали, подписывайтесь на канал и ставьте лайки чтобы не пропустить новые статьи и нарративы.
В разных операционных системах по умолчанию разные полосы прокрутки для браузеров. Но к счастью можно задавать свои собственные цвета для данного элемента, чтобы выделить свой сайт среди остальных. Как-то раз я был на одном английском сайте, и мне очень понравилось как гармонируют цвета сайта с цветом полосы прокрутки. Поэтому если вы решили сделать цвет прокрутки нестандартный, то убедитесь что он подходит по цветовой гамме вашему сайту.
Интересный эффект о котором я писал раньше: Перетаскивание блоков используя jQuery.
В данной статье мы рассмотрим jQuery плагины, позволяющие сделать нестандартную полосу прокрутки в браузере, так как CSS свойства поддерживаются не всеми браузерами.
Приступим к рассмотрению данных плагинов, которые изменяют вид полосы прокрутки в браузере.
1. NiceScroll.js
NiceScroll является jQuery плагином, который позволяет создать полосу прокрутки похожую на iOS.
2. NanoScroll
Данный плагин позволяет создать полосу прокрутки на вашем сайте как в Mac OS X.
3. jQuery custom content scroller
Плагин jQuery для стилизации полосы прокрутки в браузере с помощью CSS.
4. Tiny Scrollbar
Легкий jQuery плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.
5. Scrollbar Visibility
Легкий плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.
6. jScrollPane
С помощью данного плагина также можно делать пользовательские полосы прокрутки, которые работают во всех современных браузерах. Стили можно менять с помощью CSS файла.
7. Scrollbar Paper
С помощью данного плагина нельзя придать стиль полосе прокрутки которая у браузера, но можно задать для содержимого фреймов внутри страницы.
8. jQuery Scrollbars v2
Полностью настраиваемые полосы прокрутки, а также показывает стандартные если Javascript отключен в браузере.
9. Vertical scrollbar
Для данного плагина необходимо фиксированная высота контейнера, потому что полоса прокрутки расположена справа с помощью позиционирования.
Вывод
Конечно при использовании плагинов будет нагрузка на сайт, но и смотреться будет полоса прокрутки одинаково во всех браузерах.
Чтобы изменить скролл в Firefox, используйте следующий код.
Первое значение scrollbar-color изменяет цвет ползунка, второе - цвет скроллбара.
Значения scrollbar-width изменят толщину (ширину - для вертикального скроллбара, высоту - для горизонтального):
- auto - толщина скролла по умолчанию;
- thin - более тонкий вариант скролла;
- none - скрыть скролл.
Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox.
Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла
Какой-то контент. Текст, изображения или что-то ещё.
Стилизация скролла для webkit браузеров
Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.
mCustomScrollbar
Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar .
Сначала скачайте архив и извлеките к себе в проект файлы:
- jquery.mCustomScrollbar.min.css
- jquery.mCustomScrollbar.concat.min.js
- mCSB_buttons.jpg
Затем подключите jQuery и файлы плагина.
Или же можете подключить все файлы через CDN jsdelivr:
Инициализация
Инициализация через JavaScript
Инициализация в HTML
Настройки
Темы mCustomScrollbar
Выбрать подходящую тему можно здесь.
Если же готовых тем недостаточно, то можете проинспектировать нужный элемент скролла и стилизовать как вам это необходимо.
Добавление скролла
Чтобы принудительно добавить скролл для блока, необходимо ограничить его по высоте/ширине и добавить overflow :
- overflow-y: auto; - для создания вертикального скролла (+ max-height);
- overflow-x: auto; - для создания горизонтального скролла (+ max-width).
При создании горизонтального скролла для текстового блока может понадобится добавление следующего css: white-space: nowrap; .
Как скрыть скролл
Скроем скролл, но оставим возможность прокрутки блока.
CSS Scroll Snap
Позволяет прокручивать не попиксельно, а целыми блоками. Базовое использование.
Видео: Как убрать полосу прокрутки в Google Chrome (Ноябрь 2021).
В Google Chrome есть несколько вариантов настройки полосы прокрутки страницы. Не было бы замечательно, если бы вы могли настроить цвета полосы прокрутки, кнопки, размеры и скорости прокрутки? Ну, вы можете сделать это с помощью нескольких расширений Chrome.
Также смотрите нашу статью Как транслировать Kodi на Chromecast
Настройка полосы прокрутки Google Chrome с помощью Rescroller
Rescroller, пожалуй, лучшее расширение для настройки полосы прокрутки Chrome. Перейдите на эту страницу, чтобы добавить Rescroller в браузер. После добавления вы можете нажать кнопку « Настройки Rescroller» на панели инструментов, чтобы открыть страницу ниже.
Теперь прокрутите немного вниз до общих параметров, с помощью которых вы можете настроить ширину полосы прокрутки. Вы можете перетащить строку размера полосы прокрутки, чтобы настроить ширину полосы прокрутки. Это позволит настроить ширину панели справа от страницы Rescroller.
Непосредственно под этой ползунком есть текстовое поле «Черный список». Там вы можете ввести URL-адреса веб-сайтов, чтобы сохранить полосу прокрутки по умолчанию. Тогда настраиваемая полоса прокрутки не будет включена на этих сайтах.
Прокрутите вниз до параметров ползунка, чтобы настроить цвета ползунка. Щелкните поле « Цвет», чтобы открыть палитру, из которой вы можете выбрать альтернативные цвета для ползунка. Выберите цвет и нажмите « Применить» на палитре, чтобы переключить цвет ползунка.
Или добавьте фоновые изображения к вертикальным и горизонтальным ползункам. Нажмите кнопки « Выбрать изображение», чтобы выбрать изображение для слайдера. Затем нажмите Открыть, чтобы добавить изображение в слайдер, как показано ниже.
Параметры Slider также включают ползунки Shadows и Borders . Перетаскивание полосы границ вверх добавляет границу к ползунку. Перетащите панель теней вверх, чтобы применить к ней эффект тени.
Большинство ползунков по умолчанию квадратные. Однако вы можете настроить слайдер Chrome так, чтобы он был более изогнутым. Перетащите ползунок закругленного угла дальше вправо, чтобы добавить изогнутые углы к ползунку, как показано ниже.
Ниже вы можете установить флажки « Настроить стиль при наведении курсора» и « Настроить стиль при щелчке» . Выберите их, чтобы открыть параметры, показанные ниже. С помощью этих настроек вы можете дополнительно настроить цвета ползунка при наведении курсора или выбрать его.
С помощью параметров фона вы можете настроить главную полосу прокрутки, но не ползунок. Эти настройки практически идентичны параметрам слайдера. Таким образом, вы можете настроить цвет, тени и границы основной полосы прокрутки практически одинаково.
Чуть дальше вниз по странице Rescroller есть опции кнопок. Если он еще не выбран, нажмите Показать кнопки прокрутки, чтобы включить кнопки на полосе прокрутки и разверните эти настройки. Затем вы можете щелкнуть поле Цвет, чтобы выбрать новые цвета для этих кнопок. Если у вас есть хорошие изображения кнопок, нажмите X в полях « Вверх» , « Вправо» , « Вниз» и « Влево», а затем нажмите « Выбрать изображение», чтобы добавить их в полосы прокрутки. Посетите эту страницу на веб-сайте Iconfinder, чтобы найти значки кнопок со стрелками для полосы прокрутки.
Вы также можете добавить закругленные углы к кнопкам со стрелками. Прокрутите вниз до нижней части страницы, а затем перетащите туда панель « Закругленные углы» еще вправо. Кроме того, для кнопок со стрелками можно выбрать « Настроить стиль при наведении курсора» и « Настроить стиль при щелчке» .
Добавьте дизайн минимальной полосы прокрутки в Chrome
Для быстрой настройки полосы прокрутки, проверьте расширение Minimal Scrollbar . Это расширение, которое добавляет новую полосу прокрутки в Google Chrome, которая расширяется при наведении курсора на нее и сжимается или минимизируется, когда полоса прокрутки не выбрана. Он также имеет прозрачный слайдер с закругленными углами.
Откройте эту страницу и нажмите зеленую кнопку, чтобы добавить это расширение в Chrome. Затем перезапустите браузер и откройте несколько страниц, чтобы опробовать новую полосу прокрутки. Вы найдете страницы с полосой прокрутки, показанной на снимке прямо ниже.
Таким образом, эта полоса прокрутки имеет уменьшенную ширину, когда она не выбрана. Наведите курсор на него, чтобы развернуть полосу прокрутки. Прозрачный слайдер - это тоже что-то новое.
Это расширение не имеет много параметров настройки, но вы настраиваете его так, чтобы полоса прокрутки по умолчанию оставалась на определенном месте. Щелкните правой кнопкой мыши кнопку Minimal Scrollbar на панели инструментов и выберите Options, чтобы открыть вкладку ниже. Там вы можете ввести URL-адреса страниц в текстовое поле, чтобы они не включали настраиваемую полосу прокрутки.
Настройте прокрутку страницы прокрутки
Вы не можете настроить прокрутку страницы полосы прокрутки, иначе скорость прокрутки, с помощью Rescroller или Minimal Scrollbar. Однако это можно сделать с помощью расширения Chromium Wheel Smooth Scroller, которое пользователи Chrome могут добавить в браузер с этой страницы. Затем щелкните правой кнопкой мыши кнопку Chromium Wheel Smooth Scroller на панели инструментов и выберите « Параметры», чтобы открыть страницу, показанную ниже.
Вверху у вас есть опции колеса мыши, с помощью которых вы можете настроить прокрутку колеса мыши. Например, каждый ролик колеса мыши прокручивает ползунок вниз по странице на определенную величину; и вы можете настроить его, перетаскивая панель « Размер шага» влево или вправо. Перетащите линейку вправо, чтобы увеличить количество пикселей, по которым ползунок перемещается вниз по странице с каждым поворотом колеса, что эффективно повышает скорость прокрутки.
Чуть ниже находятся полосы гладкости и гладкости (передняя часть) . Перетащите эти полосы дальше вправо, чтобы сделать прокрутку страницы более плавными. Если вы перетащите их в крайнее левое положение, прокрутка страницы с помощью колесика мыши будет немного дергаться.
Вы также можете прокручивать страницу вверх и вниз с помощью клавиш со стрелками. Под параметрами мыши находятся настройки, с помощью которых можно настроить прокрутку страницы клавиатуры. Параметры в основном те же, что и для мыши, за исключением того, что они настраивают параметры полосы прокрутки клавиатуры Chrome.
Внизу страницы есть текстовое поле «Черный список». Там вы можете ввести URL-адреса веб-сайтов, которые нужно исключить из выбранных настроек Chromium Wheel Smooth Scroller.
Таким образом, с этими расширениями вы теперь можете настроить полосу прокрутки Google Chrome. Вы можете изменить полосу прокрутки с помощью Rescroller, добавить новый прозрачный слайдер в браузер с минимальной полосой прокрутки или дополнительно настроить прокрутку страницы с помощью Chromium Wheel Smooth Scroller.
Читайте также: