Изменить скроллбар css: Как стилизовать или убрать полосу прокрутки — CSS скроллбар — Active-Vision

05.06.2023 alexxlab

Содержание

html — Как изменить скролл в блоке?

Задать вопрос

Вопрос задан 4 года 10 месяцев назад

Изменён 2 года 1 месяц назад

Просмотрен 2k раза

для примера заменил в блоке сам позунок через псевдокласс, но ничего не поменялось:

.filter__checkbox-list {
    height: 105px;
    overflow: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar-thumb {
        background: red;
    }
}

нужно было сделать так, но будут ли работать данные css свойства для блока?

html
css

Без определения стилей для ::-webkit-scrollbar работать не будет.

Попробуйте так:

.filter__checkbox-list {
    height: 105px;
    overflow: scroll;
    overflow-x: hidden;
}
.filter__checkbox-list::-webkit-scrollbar
{
    background-color: #ddd;
    border-radius: 8px;
    width: 7px;
    overflow: hidden;
}
.filter__checkbox-list::-webkit-scrollbar-thumb
{
    background-color: #1955A8;
    border-radius: 8px;
}

Необходимо добавить еще ширину скролбара

&::-webkit-scrollbar

Пример

.filter__checkbox-list {
  height: 105px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #ccc;
  max-width: 300px;
}

.filter__checkbox-list label {
  display: block;
  padding: 5px;
}


/* Width */
.filter__checkbox-list::-webkit-scrollbar {
  width: 6px;
}


/* Thumb */
.filter__checkbox-list::-webkit-scrollbar-thumb {
  background: red;
}

<div>
  <label><input type="checkbox"> List 1 </label>
  <label><input type="checkbox"> List 2 </label>
  <label><input type="checkbox"> List 3 </label>
  <label><input type="checkbox"> List 4 </label>
  <label><input type="checkbox"> List 5 </label>
  <label><input type="checkbox"> List 6 </label>
  <label><input type="checkbox"> List 7 </label>
  <label><input type="checkbox"> List 8 </label>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Меняем цвет scrollbar (полосы прокрутки) для HTML страницы.

Используем CSS Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS

последнее обновление: 16 апреля 2020

Меняем цвет scrollbar (полосы прокрутки) для Google Chrome (webkit браузеров)

Html Файл example.html

<html>

<!— подключаем файл css —>
<link rel=»stylesheet» href=»example.css»>

     <!— страница —>
     <body>
          <div>
               Hello!
          </div>
     </body>

</html>

CSS Файл example.css

/* scrollbar */
::-webkit-scrollbar {
     width: 16px;
     height: 16px;
     background-color: #0000FF; /* blue */
}

/* thumb for scrollbar */
::-webkit-scrollbar-thumb {
     background-color: #00FF00; /* green */
     border-radius: 9em;
     box-shadow: inset 1px 1px 10px yellow; /* yellow */
}

::-webkit-scrollbar-thumb:hover {
background-color: orange; /* orange */
}

Пример смотрим, тестируем

Меняем цвет scrollbar (полосы прокрутки) для Mozilla Firefox

Html Файл example. html

<html>

<!— подключаем файл css —>
<link rel=»stylesheet» href=»example.css»>

     <!— страница —>
     <body>
          <div>
               Hello!
          </div>
     </body>

</html>

CSS Файл example.css

html, body {
scrollbar-color: #458245 #714826; /* color scrollbar color thumb */
scrollbar-width: auto | thin | none; /* width */
}

← Предыдущая тема
Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?

Следующая тема →
Сайты для изучения HTML

Ваши Отзывы . .. комментарии…

Языки программирования и другое

Программы для разработки (интегрированные среды для разработки IDE)

Microsoft Visual Studio (среда разработки для написания программ на C#, С++, Javascript, ASP.NET приложений)

Visual Studio Code (редактор кода для написания программ на JavaScript, Perl, Python, Java, C#)

HTML

Интерактивная реклама в HTML (animate banner)

Google Web Designer — редактор для создания рекламы, animate banner и т.

д. в виде HTML страницы, и в виде HTML AMP страниц (ускоренные мобильные страницы)

WEB сайт

Javascript, TypeScript

Кнопки, текстовые поля и другие элементы на WEB странице

jQuery UI — кнопки, меню, диалог, slider, spinner и так далее. Эфекты: растягивание, перетаскивание и так далее Telerik, Kendo UI — это элементы: DropDownList, ComboBox, AutoComplete, Calendar, редактор текста, excell, chart и так далее

JavaScript технологии

RxJs (это реактивное программирование и в основном используется в Angular)

JavaScript графика, анимация для игр

p5.

js — JavaScript библиотека для рисования графики 2D (рисование картинок, линий, движений), 3D графики (рисования материалы, свет, текстура)

JavaScript менеджер пакетов (добавление JavaScript библиотек в ваш Web проект)

npm — это менеджер пакетов для Node.js. npm добавляет JavaScript библиотеки в папку node_modules

Webpack — это САМЫЙ ПОПУЛЯРНЫЙ менеджер пакетов. Webpack добавляет JavaScript библиотеки в ваш проект

Yarn — это менеджер пакетов. Yarn добавляет JavaScript библиотеки в ваш проект

Parcel — это менеджер пакетов.

Parcel добавляет JavaScript библиотеки в ваш проект

Bower — это менеджер пакетов. Bower добавляет JavaScript библиотеки в ваш проект. Bower сейчас НЕ ПОДДЕРЖИВАЕТСЯ (не добавляет новых JavaScript библиотек)

Автоматическое выполнение задач в вашем Web проекте

Gulp — это JavaScript программа для автоматического выполнения задач (объединения файлов, уменьшение размера картинок) в вашем Web проекте

Grunt — это JavaScript программа для автоматического выполнения задач (объединения файлов, уменьшение размера картинок) в вашем Web проекте

База данных (My SQL)

MySQL (база данных, server) и Workbench (программа для работы с my sql).

Работает на разных платформах: Unix, Windows

База данных (Microsoft SQL Server)

Microsoft SQL Server (база данных, server) и SQL Management Studio (программа для работы с sql server). Работает только в Windows

Microsoft SQL (язык запросов в базе данных)

База данных (PostgreSQL)

PostgreSQL сервер (база данных) и pgAdmin (программа для работы с PostgreSQL сервер).

Работает на разных платформах: Unix, Windows

Работа с базой данных на C#

ADO.NET (работа с базой данных на C#)

Entity Framework (EF5, EF6) для работы с базой данных на C#

Entity Framework Core (EF Core) для работы с базой данных на C#

Работа с Redis

Redis

Интернет, HTTP, TCP, UDP, FTP протоколы

RabbitMQ

Microsoft C# и . NET

Microsoft Visual Basic

Microsoft Visual Basic & Excell

Microsoft Office 365 E3 (Web services)

Microsoft Office 365 E3 (Teams plug-in, SharePoint web api)

Twilio (sms)

Twilio (send sms)

Python

Java

Android телефон, планшет (пишем приложение на Java, игру на C++)

Mobile Development with C++ (Android, iOS)

Mobile Development with C++ (iOS, Android, Windows Phone)

Flutter & Dart

Flutter — фрэймворк для создания мобильных приложений от компании Google

Облачные технологии

Microsoft Azure & Azure DevOps (облачные технологии)

Amazon Web Services (облачные технологии)

Google Cloud Platform (облачные технологии)

Heroku (облачные технологии)

Рисуем блок схемы (диаграммы) для программы

Резюме (как найти работу)

Как написать резюме, причины перехода на другую работу

Автоматизированное тестирование

Selenium WebDriver (для автоматизированного тестирования веб-приложений)

Рефакторинг & Паттерны

Методологии управления проектами

Agile, scrum, kanban.

Методологии в управлении IT-проектам. В чем разница?

Правила разработки web приложений в Яндекс

Управление версиями проекта, история измененных файлов

Svn (управление версиями проекта, история измененных файлов) | TortoiseSVN (работаем с SVN под Windows)

Математические алгоритмы

Математические алгоритмы (пересечение прямоугольников, массивы, графы)

CI/CD

Непрерывная интеграция (автоматическая сборка проекта, развертывание проекта на удаленный компьютер) | CI/CD

Docker

Kubernetes

Kubernetes (запуск контейнеров на виртуальных машинах и балансировка нагрузки виртуальных машин)

Микрослужбы

Еще языки программирования

C++

Разработка игр

Разработка игр | для телефонов на Unity, MonoGame | для браузера Google Chrome на JavaScript, HTML | рисуем графику

Технологии для написания игр

SmartFoxServer — библиотека multiplayer на Java, C#, JavaScript, Unity, для Android, iOS

Интернет браузеры

Интернет браузер «Google Chrome»

Telegram (месенджер)

WEB сервер

Что такое WEB сервер ?

bat файлы

bat файл (командная строка)

.htaccess Файлы

.htaccess файл (Команды)

Viber

Viber. Устанавливаем (на Windows или phone). Переносим Viber сообщения и Viber фото.

Операционная система LINUX

Ubuntu (linux) Virtual Machine on Windows 10

Ubuntu (in console as WSL) on Windows 10

Операционная система Mac OS

Mac OS Virtual Machine on Windows 10

Операционная система WINDOWS и программы

Операционная система ANDRIOD

Операционная система iOS

Компьютерная платформа (процессор)

x86 процессоры

ARM процессоры

Ноутбук (BIOS)

В ноутбуке не работают клавиши F1 .

.. F2 как надо. Проблема: я открываю браузер Google Chrome и нажимаю кнопку F5 чтобы перезагрузить страницу, а у меня включается подсветка клавиатуры.

Быстродействие компьютера (процессора)

Сравниваем быстродействие компьютера (процессора) на сайте http://userbenchmark.com

Заходим на удаленный компьютер (чтобы помочь кому нибудь что нибудь настроить)

TeamViewer (заходим на удаленный компьютер)

Графика и видео

2D графические редакторы

3D графические редакторы

Видео

Online: просмотр Word файлов, конвертация PDF файлов, распознование картинки в текст

Просмотр и редактирование Word файлов (doc, docx) ОНЛАЙН

Просмотр и редактирование Word файлов (doc, docx), Adobe (pdf) ОНЛАЙН

PDF to word, images

Convert PDF to Word (online)

Convert FB2 to PDF (online)

Распознавание картинки в текст

Распознать (перевести) картинку в текст (ONLINE)

Регулярные выражения

Регулярные выражения (проверить онлайн)

Поставить HD Video Box в Windows

Как купить английские книги и читать?

Как купить английские книги и читать

Chemical, analytics laboratory

Chemical, analytics laboratory (Chromatography / Mass Spectroscopy)

html — Как изменить css полосы прокрутки таблицы

Задавать вопрос

спросил 1 год, 1 месяц назад

Изменено 1 год, 1 месяц назад

Просмотрено 356 раз

Я хочу изменить стиль полосы прокрутки таблицы, но даже если я пробовал много способов, это не меняется.

Я хочу изменить цвет фона, радиус границы, ширину и высоту.

Мой код jsfiddle: https://jsfiddle.net/gulay/1d73h6yt/5/

Я также пытался указать имя класса следующим образом:

 .tavi-scheduler-table::-webkit-scrollbar-thumb {
      фон: #bfbfbf ;
      радиус границы: 10 пикселей;
    }

Но все равно не работает.

Одно из того, что я пробовал:

 ::-webkit-scrollbar-thumb {
  фон: #bfbfbf ;
  радиус границы: 10 пикселей;
}
::-webkit-полоса прокрутки: вертикальная {
  ширина: 8 пикселей;
}
::-webkit-полоса прокрутки: горизонтальная {
  высота: 8 пикселей;
}
::-webkit-кнопка полосы прокрутки{
  видимость: коллапс;
}

код CSS:

 .tavi-scheduler-table{
  z-индекс: 10;
  положение: абсолютное;
  дно:0;
  слева:0;
  справа: 0;
  цвет фона: белый;
  максимальная высота: 25%;
  переполнение-у: авто;
}
.table-border-top{
  верхняя граница: 3px сплошная #dee2e6;
}
.кнопка закрытия стола{
  верхняя граница: 0%;
}

HTML-код:

 
    <таблица>
      
        
          {{'report. tavi.tavicalendar.calendar_date'| перевести}}
          {{'report.tavi.tavicalendar.driver_plate'| перевести}}
          {{'report.tavi.tavicalendar.process'| перевести}}
          {{'report.tavi.tavicalendar.status'| перевести}}
        
      
      
        
          {{evn.start_text}}
          {{evn.title}}
          {{evn.operation_text}}
          {{evn.status_text}}

html
css
полоса прокрутки

попробуйте только это:

 ::-webkit-scrollbar {
    ширина: 10 пикселей;
    высота: 8px
 }
 ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    радиус границы: 10px;
    фон: #6d6d6d;
}

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

История пользовательской полосы прокрутки с использованием CSS

Полоса прокрутки полезна и очевидна, когда содержимое веб-страницы выходит за пределы видимых областей. Внешний вид полосы прокрутки зависит от реализации браузера. Внешний вид полосы прокрутки отличается от Google Chrome, Firefox и Safari. В большинстве случаев внешний вид по умолчанию не такой очаровательный.

Хорошая новость заключается в том, что мы можем легко настроить внешний вид полосы прокрутки с помощью нескольких строк CSS. В этой статье мы это узнаем.

Во-первых, это часть HTML. Давайте создадим абзац со случайным текстом и заключим его в элемент div . Мы добавим класс к div , чтобы мы могли добавлять к нему стили.

<дел> <р> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper diam ac nisl porttitor, non porttitor сапиен транспортное средство. Cras vel scelerisque arcu. Cras nec sodales sem. Aenean viverra semper augue, eu pellentesque lacus laoreet et. In porttitor quam et turpis facilisis aliquet. Morbi in urna vel tortor finibus maximus in ut augue. Sed posuere semper condimentum.

Quisque lacinia ut sem eget egestas. Donec risus est, porttitor vitae mauris quis, pretium tincidunt ex. Suspendisse est libero, fringilla in aliquet ut, faucibus quis nibh. Sed eget ex eu orci ullamcorper растление. Энейская pharetra quis neque non imperdiet. Морис Эйсмод Mattis sapien, id gravida nunc pulvinar ut. Vestibulum diam augue, эгесты ут одио ут, плацента молестие метус.

Войти в полноэкранный режимВыйти из полноэкранного режима

Теперь давайте применим некоторые стили к div , чтобы получить полосу прокрутки для игры. Мы дали ему сравнительно меньшую ширину и атрибут overflow , установленный как auto для появления полосы прокрутки.

 .scroll-демо {
  ширина: 300 пикселей;
  высота: 200 пикселей;
  переполнение: авто;
  отступ: 5px;
  граница: 1px сплошная #ebebeb;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Отлично!!! На этом этапе, если мы визуализируем div в веб-браузере это будет выглядеть так:

Рендеринг в Google Chrome

Хотя полоса прокрутки может выглядеть как простой элемент управления, вы будете удивлены, узнав, что она состоит из некоторых важных частей. Нам нужно знать об этих частях, чтобы настроить их лучше. Давайте теперь рассмотрим различные части полосы прокрутки и посмотрим, для какой цели служит каждая из них.

полоса прокрутки : это вся полоса прокрутки
кнопка полосы прокрутки : Верхняя и нижняя часть полосы прокрутки.
scrollbar-track : Строка, по которой он прокручивается.
scrollbar-thumb : Ручка, которую мы используем для прокрутки.
scrollbar-track-piece : Часть дорожки прокрутки, не закрытая большим пальцем.
scrollbar-corner : Нижний правый угол.
resizer : Маркер или ручка для изменения размера.

Псевдоэлементы CSS доступны для стиля на основе каждого из вышеуказанных свойств.

 ::-webkit-полоса прокрутки
::-webkit-кнопка полосы прокрутки
::-webkit-полоса прокрутки-трек
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-угол
::-webkit-изменение размера

Войти в полноэкранный режимВыйти из полноэкранного режима

Обратите внимание, что эти псевдоэлементы CSS не включены в качестве стандарта для реализации всеми браузерами. Вот почему эти псевдоэлементы работают в Chrome, Safari, Edge и Opera, но пока не работают в Firefox. Не волнуйся. У нас есть несколько альтернатив для Firefox, и мы увидим это через некоторое время.

Теперь давайте добавим ширину полосе прокрутки и фон для ее дорожки. Итак, мы определили их с помощью псевдоэлементов ::-webkit-scrollbar и ::-webkit-scrollbar-track .

 .scroll-demo::-webkit-scrollbar {
  ширина: 10 пикселей;
}
.scroll-demo::-webkit-scrollbar-track {
  box-shadow: вставка 0 0 10px #143d59;
  радиус границы: 50px;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Вот как будет выглядеть полоса прокрутки с вышеуказанными изменениями:

Теперь мы хотим стилизовать бегунок прокрутки. Давайте применим к нему цвет фона и значение радиуса границы. Мы сделаем это с помощью псевдоэлемента ::-webkit-scrollbar-thumb .

 .scroll-demo::-webkit-scrollbar-thumb {
  фон: #ffd55a;
  радиус границы: 50px;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Взгляните! Теперь изменился и цвет большого пальца.

Как насчет изменения цвета большого пальца при наведении? Ну, это легко. Мы можем использовать : наведите курсор на , чтобы применить цвет.

 .scroll-demo::-webkit-scrollbar-thumb:hover {
  фон: #64dd17;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Итак, когда мы наводим указатель мыши на прокрутку , цвет меняется соответственно.

Пришло время настроить верхнюю и нижнюю кнопки прокрутки. Давайте используем псевдоэлемент ::-webkit-scrollbar-button для его настройки. Здесь мы применяем черный цвет с радиусом границы к обеим кнопкам прокрутки.

 .scroll-demo :: - webkit-scrollbar-button {
  фон: черный;
  радиус границы: 10px;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Изменения применены, и весь вид полосы прокрутки изменен на пользовательский вид.

Вы можете максимально творчески настроить полосу прокрутки, используя эти псевдоэлементы. Использование градиентов делает его очень привлекательным. Пожалуйста, исследуйте. Одно предостережение: сохраняйте сбалансированный цветовой контраст при настройке полосы прокрутки.

Итак, мы поняли, как это работает, но все равно это не работает в Firefox. Давайте изучим обходной путь.

Пользовательская полоса прокрутки и Firefox

На данный момент ни один из псевдоэлементов не работает в Firefox. Однако вы можете использовать элементы стиля scrollbar-color и scrollbar-width для настройки полосы прокрутки в Firefox.

 .scroll-демо {
  ширина: 300 пикселей;
  высота: 200 пикселей;
  переполнение: авто;
  отступ: 5px;
  граница: 1px сплошная #ebebeb;
  /* стили ниже предназначены для Firefox */
  цвет полосы прокрутки: #ffd55a #143d59;
  ширина полосы прокрутки: авто;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Для цвета полосы прокрутки первый цвет применяется к бегунку полосы прокрутки, второй — к дорожке полосы прокрутки.

Изменить скроллбар css: Как стилизовать или убрать полосу прокрутки — CSS скроллбар — Active-Vision

html — Как изменить скролл в блоке?

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Меняем цвет scrollbar (полосы прокрутки) для HTML страницы.

html — Как изменить css полосы прокрутки таблицы

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

История пользовательской полосы прокрутки с использованием CSS

Пользовательская полоса прокрутки и Firefox

Добавить комментарий Отменить ответ