Как изменить ползунок прокрутки css

Как изменить размер ползунка скролла в css?

У меня есть блок в котором указаны свойства максимальной высоты max-height:300px; и overflow-y: auto; Можно ли сделать размер ползунка полосы прокрутки фиксированным? Сейчас его высота зависит от контента внутри блока, а нужно чтобы он был (например 50px) высоты независимо от контента внутри блока. Пытался найти какую-нибудь информацию в интернете, но особо информации не нашёл

Отслеживать
задан 12 апр 2021 в 8:28
korzholejka korzholejka
17 3 3 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вы можете использовать js плагин для этого. например, jQuery custom content scroller

В данном случаи высота движка задается в классе .mCSB_dragger

(function($)< $(window).on("load",function()< $(".block").mCustomScrollbar(< theme: "dark", >); >); >)(jQuery);

.block < max-height:300px; overflow-y: auto; width: 300px; >.mCSB_dragger

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem

Стилизация полосы прокрутки в CSS

В сентябре 2018 года Консорциум Всемирной паутины W3C CSS Scrollbars определил спецификации для настройки внешнего вида полос прокрутки с помощью CSS.

По состоянию на 2021 год 96% интернет-пользователей используют браузеры, поддерживающие CSS-стили для полосы прокрутки. Однако при настройке стилей нужно написать два набора правил CSS: для Blink и WebKit, а также браузеров Firefox.

В этом мануале вы узнаете, как использовать CSS для настройки полос прокрутки, которые будут поддерживаться современными браузерами.

Требования

Чтобы следовать инструкциям, рекомендуем вам ознакомиться с такими понятиями:

префиксы поставщиков
псевдоэлементы
постепенная деградация

Стилизация полос прокрутки в Chrome, Edge и Safari

В настоящее время для оформления полосы прокрутки в браузерах Chrome, Edge и Safari существует псевдоэлемент -webkit-scrollbar.

В приведенном ниже примере использованы псевдоэлементы ::- webkit-scrollbar, ::- webkit-scrollbar-track и ::webkit-scrollbar-thumb.

body::-webkit-scrollbar < width: 12px; /* ширина всей полосы прокрутки */ >body::-webkit-scrollbar-track < background: orange; /* цвет зоны отслеживания */ >body::-webkit-scrollbar-thumb < background-color: blue; /* цвет бегунка */ border-radius: 20px; /* округлось бегунка */ border: 3px solid orange; /* отступ вокруг бегунка */ >

Полоса прокрутки, созданная с помощью этих правил CSS, будет оранжевого цвета с синим бегунком. Бегунок будет занимать не всю ширину зоны отслеживания – с каждой стороны будет отступ в 3 пикселя.

Этот код работает в последних версиях Chrome, Edge и Safari.

К сожалению, W3C официально отказался от этой спецификации и, скорее всего, со временем она станет нерекомендуемой.

Стилизация полос прокрутки в Firefox

В настоящее время оформление полосы прокрутки для Firefox происходит при помощи CSS Scrollbars.

В этом примере мы используем свойства scrollbar-width и scrollbar-color:

body < scrollbar-width: thin; /* "auto" или "thin" */ scrollbar-color: blue orange; /* цвет бегунка и зоны отслеживания */ >

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

Эта спецификация имеет некоторые общие черты со спецификацией -webkit-scrollbar. Однако в настоящее время она не поддерживает настройку отступов и округлости бегунка.

Создание перспективных стилей

CSS можно написать так, чтобы он поддерживал и спецификацию -webkit-scrollbar, и CSS Scrollbars.

В следующем примере мы используем scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb.

/* Работает в Firefox */ * < scrollbar-width: thin; scrollbar-color: blue orange; >/* Работает в Chrome, Edge и Safari */ *::-webkit-scrollbar < width: 12px; >*::-webkit-scrollbar-track < background: orange; >*::-webkit-scrollbar-thumb

Браузеры Blink и WebKit будут игнорировать правила, которые они не распознают, они применят правила -webkit-scrollbar. В свою очередь, браузеры Firefox тоже будут игнорировать неизвестные им правила и применять только CSS Scrollbars. Как только браузеры Blink и WebKit полностью откажутся от спецификации -webkit-scrollbar, они начнут поддерживать код CSS Scrollbars, который ранее игнорировали.

Заключение

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

Также полосу прокрутки можно имитировать, скрыв стандартную полосу и используя JavaScript для определения высоты и положения новой полосы. Однако такой подход имеет некоторые ограничения при воспроизведении таких действий, как прокрутка с инерцией или затухание движения.

Читайте также: Что такое CSS?

Как изменить прокрутку css

Когда на портале публикуется очень большой материал или длинный абзац на нашем сайте, пользователь прокручивает страницу вниз, чтобы прочитать ее полностью. Если бы мы сделали стильную полосу прокрутки, где взаимодействие с пользователями улучшится, да и вообще сильно меняет обзор сайта.

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

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

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

Изменить стиль полосы прокрутки

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

Прежде чем делиться исходным кодом, давайте поговорим об этом, где для начала создаем div с ширину 3500px из-за создания прокрутки. Этот эффект будет работать в браузерах WebKit, таких, как Chrome, Safari, Opera. Существует свойство CSS ::-webkit-scrollbarдля настройки полосы прокрутки.

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

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

ZorNet.Ru — сайт для вебмастера

/** CSS Custom Scrollbar **/
::-webkit-scrollbar

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

Как можно заметить, это не так сложно установить, другое дело если изменить вид, но кто немного знаком с CSS, то сделает быстро и легко, что некоторые настраивают в онлайн режиме, через браузер.

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

Настройка полосы прокрутки с помощью CSS

Пользовательские полосы прокрутки становятся все более популярными. Наверняка вы уже встречали веб-сайты с уникальными полосами прокрутки, благодаря которым эти сайты воспринимаются по-другому. Существует несколько основных способов настроить пользовательскую полосу прокрутки.

В этом руководстве мы рассмотрим самый простой способ – CSS3. Также есть плагины jQuery для настройки полосы прокрутки, но, чтобы их использовать, вам придется добавить больше JavaScript.

Основные термины

Пользовательские полосы прокрутки отображаются с префиксом поставщика -webkit; так они определяются в браузерах, использующих механизм рендеринга Webkit и Blink. На картинке ниже зеленым выделен бегунок, оранжевым – дорожка.

-webkit-scrollbar состоит из семи различных псевдоэлементов, которые вместе составляют полный элемент полосы прокрутки:

::-webkit-scrollbar – фон полосы.
::-webkit-scrollbar-button – кнопки направлений на полосе прокрутки.
::-webkit-scrollbar – отслеживание пустого пространства ниже индикатора выполнения.
::-webkit-scrollbar-track-piece — самый верхний слой индикатора выполнения, не закрытый бегунком.
::-webkit-scrollbar-thumb – размер перетаскиваемого элемента изменяется в зависимости от размера прокручиваемого элемента.
::-webkit-scrollbar-corner – нижний угол прокручиваемого элемента, в котором встречаются две полосы прокрутки (вертикальная и горизонтальная).
::-webkit-resizer – перетаскиваемый маркер изменения размера, который появляется над полосой прокрутки в нижнем углу некоторых элементов.

Теперь, когда вы знакомы с основными опциями, давайте начнем пользовательскую настройку.

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

Сначала создайте файлы index.html и style.css и откройте текущий каталог в редакторе кода. В файл index.html поместите следующий код:

Во-первых, в этом файле мы устанавливаем ширину, высоту и фоновый цвет класса .scrollbar (width, height, background-color соответственно), затем мы определяем overflow-y: scroll, чтобы получить вертикальную полосу прокрутки. Параметр min-height: 450px в классе .force-overflow, чтобы полоса прокрутки появилась.

Взгляните на файл styles.css:

В результате мы получим такую полосу:

Давайте используем псевдоэлемент scrollbar для создания пользовательской полосы прокрутки. Он изменит стандартную ширину полосы до 6 пикселей, а затем установит цвет фона на #F5F5F5.

Как вы знаете, полоса прокрутки содержит дорожку, кнопку и бегунок (track, button и thumb). Попробуем придать бегунку стильный вид. Мы используем для этого псевдоэлемент с префиксом -webkit (например, ::-webkit-scrollbar-thumb) и установим фоновый цвет полосы прокрутки.

После этого полоса прокрутки выглядит так:

Теперь давайте используем в scrollbar-track псевдоэлемент box-shadow, чтобы сделать добавить контраст между полосой прокрутки и бегунком.

Заключение

В этой статье мы рассмотрели следующие вопросы:

Пользовательские полосы прокрутки уже не редкость. Вы можете встретить их на крупных сайтах и в блогах, особенно в личных портфолио.
Существует множество плагинов jQuery, которые помогут вам изменить полосу прокрутки, но они требуют дополнительного кода JavaScript.
Пользовательские полосы прокрутки отображаются через префикс -webkit.
Кроме того, мы выяснили, из чего состоит базовая структура полосы прокрутки.

CSS позволяет легко стилизовать прокрутку, но такие полосы выглядят немного грубо. Однако операционные системы типа Windows, OS X и Linux предоставляют собственные стили для полосы прокрутки. Это, в свою очередь, может привести к нежелательным результатам, конфликтам и несоответствиям внутри вашего проекта. Помните по принципе KISS (keep it simple, stupid), не делайте свой код слишком причудливым.

Примечание: Полный код этого руководства можно найти на CodePen.

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

Вы задумывались о том, как изменить полосу прокрутки на сайте? Я задумывался, так как иногда хочется, чтобы абсолютно все соответствовало гамме сайта, даже полоса прокрутки.
В этой статье попробуем изменить цвет прокрутки для вашего сайта, используя только таблицу стилей.
Но, к сожалению, не все браузеры поймут и смогут выполнить ваши требования, которые вы пропишите в CSS. Эти стили подойдут только для тех браузеров, которые созданы по образу и подобию Google Chrome, OPERA и Internet Explorer. Да, вы правильно поняли, Mozilla Firfox останется в сторонке .

Полоса прокрутки для Internet Explorer

scrollbar-arrow-color – цвет стрелки.
scrollbar-track-color – цвет подложки.
scrollbar-face-color – цвет самой полосы.
scrollbar-shadow-color
scrollbar-highlight-color — цвет разделяющей полосы
scrollbar-3dlight-color
scrollbar-darkshadow-color — цвет внешних границ полосы

Код нужно вставит в CSS файл

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

Полоса прокрутки для Google Chrome

webkit-scrollbar — скроллбар
webkit-scrollbar-button — кнопка
webkit-scrollbar-track — трек
webkit-scrollbar-track-piece — видимая часть трека
webkit-scrollbar-thumb — ползунок
webkit-scrollbar-corner – уголок
webkit-resizer — изменение размеров

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

Различные состояния для полосы прокрутки

Эти псевдо селекторы позволяют точнее выбирать разные части полосы прокрутки для различного состояния. Описание смотрите на блоге WebKit (на англ. ).

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Полоса прокрутки.

Коротенькая и совсем несложная глава про цвет полосы прокрутки.

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

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

В таблице ниже перечислены все свойства CSS из семейства scrollbar , а также показан результат применения этих свойств.

Читать:

Как на почте поставить фото

Ну вот Вам ещё и рисунок для наглядности:

Возможные значения свойств из семейства scrollbar:

#ff0000 — Шестнадцатеричное значение цвета RGB.
red — Именное значение цвета.
RGB(255, 0, 0) — Значение цвета RGB.
inherit — применяется значение родительского элемента.(по умолчанию)

Кроссбраузерность свойства scrollbar.

Хочу отметить, что свойства CSS из семейства scrollbar являются расширением спецификации CSS2, введенным компаний Microsoft, и реализованным в браузерах Internet Explorer начиная с версии IE 5.5, соответственно другие браузеры, на тот момент, полностью игнорировали данное свойство. Но прошло время и многие браузеры стали подстраиваться под это дополнение к спецификации от Microsoft.

Однако, до сих пор всё не так уж гладко! Так что во многих браузерах стиль полосы прокрутки или игнорируется или работает не совсем корректно.. например многие игнорируют данное свойство для тега или не понимают некоторые отдельные свойства скроллбара.

Ниже приведу несколько советов, которые возможно помогут решить данную проблему в тех или иных браузерах. Употребляю слово «возможно» потому что очень трудно отследить в динамике за всеми изменениями разных браузеров. Мир не стоит на месте каждый день, там или здесь, что-то меняется! Жаль вот только что кроссбраузерность всегда остаётся головной болью!

Но что то я заговорился.. Итак, ряд «таблеток»:

1. По возможности используйте вот такой заголовок :

2. Указывайте свойства скроллбара не только для тега но и для тега

3. Попробуйте, если это более менее рационально для Вашего сайта, внедрять стили полосы прокрутки используя атрибут style , а не одноименный тег в «голове» документа или внешний css файл

Возможно, данные рекомендации сработают в некоторых браузерах, в любом случае в IE (начиная с версии 5.5) всё будет работать корректно, а раз хоть где-то работает это уже хорошо!

Полезные советы:

Так как scrollbar является одним из важных элементов интерфейса, постарайтесь не вести пользователя в заблуждение, используя совсем уж нестандартный дизайн полосы прокрутки.

Если Вам прямо таки совсем необходим нестандартный скроллбар, не только нестандартный цвет, он и нестандартная форма, да и еще и работающий во всех браузерах используйте скрипты, но не забывайте про первый совет!!

В браузере внешний вид полосы прокрутки черпается из настроек Windows и например у меня, она имеет вот такой вид:

Но как только Вы примените к полосе прокрутки любое свойство из семейства scrollbar , связь с настройками Windows потеряется, точнее станет «по умолчанию» и полоса приобретёт вот такой вид:

Похожие публикации:

Как изменить размер background image css
Как выставить блок по центру в css
Как убрать отступы от края страницы в css
Как убрать рамки у кнопки css

Как изменить ползунок прокрутки css

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color , которые применялись к элементам с полосами прокрутки (вроде body ), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar ) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Необходимое

Разные части

Вот псевдоэлементы, отвечающие за разные части полос прокрутки.

Различные состояния

Это псевдоселекторы, они позволяют точнее выбирать разные части полосы прокрутки, когда они находятся в различных состояниях.

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

:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.

:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.

:decrement — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека уменьшена в процессе использования (вверх для вертикального скроллбара и влево для горизонтального).

:increment — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека увеличена в процессе использования (вниз для вертикального скроллбара и вправо для горизонтального).

:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.

:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.

:double-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка является частью пары кнопок, которые находятся вместе в конце скроллбара. Для видимой части трека сообщает, что она примыкает к паре кнопок.

:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.

:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.

:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.

:window-inactive — применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с ::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

Теперь всё вместе

Эти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.

Очень простой пример

Чтобы сделать действительно простой пользовательский скроллбар мы добавим это.

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

В диких условиях

Отмечу очень тонкий и симпатичный скроллбар в блоге Тима Ван Дамма Maxvoltar (сайт Тима больше не использует этот дизайн).

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

На Forrst используются пользовательские скроллбары для фрагментов кода, которые также довольно хороши. Они визуально менее насыщенные, из-за чего не очень сочетаются с подсветкой кода.

Как изменить полосу прокрутки на CSS

На сегодняшний день, можно очень простым способом изменить внешний вид всем надоевшей серой полосы прокрутки. И для этого не нужно подключать сторонние библиотеки или писать JavaScript код, а достаточно запомнить несколько CSS свойств. Правда, такой способ имеет поддержку, только у популярных -webkit браузеров — Chrome, Safari, Opera.

Данные CSS свойства не будут работать в IE и Firefox, но поскольку большинство пользователей, сегодня выбирают Chrome, то можно смело эти свойства применять в своих проектах. Ничего страшного не произойдет, если немногочисленные пользователи других браузеров, увидят не кастомную полосу прокрутки (scrollbar), а дефолтную.

Свойство -webkit-scrollbar

Свойство -webkit-scrollbar служит контейнером для всех элементов полосы прокрутки: ползунка и дорожки. Его стандартная ширина равна 17 пикселям, но мы можем задавать любую ширину.

Свойство -webkit-scrollbar-track

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

Мы видим, что дорожка покрасилась в светло-розовый цвет.