Содержание

Изменить дизайн скроллбара на CSS для Chrome, Safari, Yandex и других браузеров

Довольно часто дизайнер предлагает добавить особые стили на скроллбар. По дизайну это выглядит красиво, но для разработчика это может быть дополнительной головной болью. В этой статье разберемся как изменить дизайн скроллбара на CSS для webkit-браузеров (Chrome, Safari, Yandex и др.).

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

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

Итак, в CSS для движка webkit есть несколько псевдоклассов:

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

 

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

 

Пример: 

524


Также рекомендуем:

CSS: современный способ оформления скроллбаров

Настройка полосы прокрутки (scrollbar) в основных браузерах была трудна и неприятна примерно до сентября 2018 года, когда был выпущен рабочий проект W3C CSS Scrollbars, который выглядит как реальный способ устранить трудности стилизации скроллбаров.

На протяжении многих лет появлялись различные способы сделать это. Microsoft Internet Explorer был одним из первых, кто предоставил CSS API для скроллбаров, но многие разработчики были настолько разочарованы реализацией, что создавали собственные решения с помощью JavaScript.

Однако, JavaScript-решения тоже не во всём идеальны, например им трудно эмулировать высокопроизводительное поведение, допустим, прокрутку с инерцией или прокрутку больших документов.

Перенесемся в настоящее время, теперь, когда Internet Explorer вытесняется Microsoft Edge, это сводится к двум подходам:

  • Chrome/Edge/Safari используют -webkit-scrollbar
  • Firefox использует новую спецификацию CSS Scrollbars API (т.е. scrollbar-color и scrollbar-width).

Давайте посмотрим на некоторые примеры кода!

Скроллбары в Chrome/Edge/Safari

В Chrome/Edge/Safari для стилизации прокрутки доступны css-свойства с вендорным префиксом -webkit-scrollbar.

body::-webkit-scrollbar {
  width: 12px;               /* ширина scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;        /* цвет дорожки */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* цвет плашки */
  border-radius: 20px;       /* закругления плашки */
  border: 3px solid orange;  /* padding вокруг плашки */
}

Есть хорошие новости… И плохие новости…

Хорошие новости! Этот код прекрасно работает в последних выпусках Chrome/Edge/Safari!

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

Скроллбары в Firefox

Firefox — чемпион в использовании новых стандартов W3C, они всегда готовы попробовать новые API. Таким образом, новые функции CSS Scrollbars уже доступны в обычных выпусках Firefox:

body {
  scrollbar-width: thin;          /* "auto" или "thin"  */
  scrollbar-color: blue orange;   /* плашка скролла и дорожка */ 
}

Здесь легко заметить несколько различий по сравнению с устаревшей спецификацией -webkit-scrollbar.

Во-первых, это лаконичный css-код! А во-вторых, в нём отсутствуют такие функции, как создание отступов и скруглений для плашки скролла. Поскольку спецификация всё ещё меняется, эти недостающие функции могут быть в неё включены.

Дальше-то, что?

Как стилизовать полосы прокрутки, с учётом отсутствия единого авторитетного API? Надо просто объединить оба подхода!

/* W3C standard
   сейчас только для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* для Chrome/Edge/Safari */
*::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 5px;
  border: 3px solid orange;
}

Когда -webkit-scrollbar устареет, можете спокойно вернуться к новому стандарту CSS Scrollbars.

See this code CSS scrollbar on x.xhtml.ru.

Вариант с использованием настраиваемых CSS-свойств (CSS-переменные). В этом случае появляется возможность управлять настройками CSS-свойств полосы прокрутки из Javascript, например, для управления темами:

See this code Styling scrollbars with CSS on x.xhtml.ru.

Styling Scrollbars with CSS: The Modern Way to Style Scrollbars.

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

Firefox 64 добавлена поддержка спецификации проекта CSS Scrollbars Module Level 1 , который добавляет два новых свойства из scrollbar-widthи scrollbar-colorкоторые дают некоторый контроль над тем, как отображаются полосы прокрутки.

Вы можете установить scrollbar-colorодно из следующих значений (описания из MDN):

  • auto Рендеринг платформы по умолчанию для дорожки части полосы прокрутки при отсутствии каких-либо других связанных свойств цвета полосы прокрутки.
  • dark Показать темную полосу прокрутки, которая может быть либо темным вариантом полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки с темными цветами.
  • light Показать светлую полосу прокрутки, которая может быть либо легкой версией полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки со светлыми цветами.
  • <color> <color> Применяет первый цвет к ползунку полосы прокрутки, второй — к дорожке полосы прокрутки.

Обратите внимание, что darkи lightзначения в настоящее время не реализованы в Firefox .

примечания macOS:

Автоматически скрывающие полупрозрачные полосы прокрутки, используемые по умолчанию в macOS, не могут быть окрашены этим правилом (они по-прежнему выбирают свой собственный контрастный цвет на основе фона). Только постоянно отображаемые полосы прокрутки (Системные настройки> Показать полосы прокрутки> Всегда) окрашены.

Визуальная демонстрация:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}
<div>
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div>
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div>
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div>
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

Вы можете установить scrollbar-width

одно из следующих значений (описания из MDN):

  • auto Ширина полосы прокрутки по умолчанию для платформы.
  • thin Тонкий вариант ширины полосы прокрутки на платформах, которые предоставляют эту опцию, или более тонкая полоса прокрутки, чем ширина полосы прокрутки платформы по умолчанию.
  • none Полоса прокрутки не отображается, однако элемент все еще можно прокручивать.

Вы также можете установить конкретное значение длины, в соответствии со спецификацией. И thinта, и другая длина могут ничего не делать на всех платформах, и что именно она делает, зависит от платформы. В частности, Firefox, похоже, в настоящее время не поддерживает определенное значение длины ( этот комментарий к их баг-трекеру, кажется, подтверждает это ).

thinKeywork действительно , кажется, хорошо поддерживается , однако, с MacOS и поддержки Windows , в- крайней мере.

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

Визуальная демонстрация:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}
<div>
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div>
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div>
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Стилизация полосы прокрутки CSS с помощью JavaScript и не только: примеры решений

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit.

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

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью [email protected]

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Вот еще одна простая полоса прокрутки:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

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

Я вставлю экземпляр здесь:

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Изменение полосы прокрутки css | Gadget-apple.ru

Наверняка вы видели сайты с оригинальными полосами прокрутки. Это достигается с помощью нового CSS scroll свойства webKit-scrollbar . К сожалению, оно работает только в браузерах на движке WebKit . Но поддерживается jQuery почти во всех обозревателях. Давайте выполним стилизацию скроллбара.

Данное свойство поддерживается версиями Google Chrome для настольных компьютеров и мобильных устройств, Apple Safari , Flock , OmniWeb . Даже если вы создаете дизайн только для этих браузеров без использования jQuery , то сможете охватить только 72% пользователей интернета. Но если у вас нет аллергии на программирование, то можете быть уверены, что каждый ваш посетитель увидит красиво стилизованный скроллбар.

Стилизация скроллбара

Полосы прокрутки реализованы там, где длина контента превышает ширину окна контейнера. Благодаря этому вы получаете возможность стилизовать iframe , элементы div и поле ввода текста. В iframe и текстовой области окна браузеры автоматически добавляют полосу прокрутки в нижней части, когда содержимое выходит за пределы видимой области. Тем не менее, в контейнерах необходимо предоставлять дополнительную информацию для браузеров. Установка свойству overflow значения scroll говорит браузерам о том, что нужно выводить полосы прокрутки в случае переполнения окна контентом:

Это код scrolling CSS покажет полосу прокрутки такой (справа)

Использование псевдоэлементов CSS для настройки скроллбара

IE5.5 был первым браузером, поддерживающим основные стили для скроллинга. Используя свойство scrollbar-face-color , можно были изменить цвет полос прокрутки. Хотя это и не добавляло большого разнообразия, но все же лучше, чем стандартная полоса прокрутки в браузере. Поскольку это свойство по-прежнему поддерживается в Internet Explorer , его можно использовать для пользователей, предпочитающих этот браузер.

Для WebKit-браузерах в CSS существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.

  1. ::webkit-scrollbar — позволяет настроить ширину и цвет полосы прокрутки. Когда этот псевдоэлемент указан, WebKit выключает свой встроенный рендеринг скроллбара и использует настройки, указанные для div scroll CSS . Обратите внимание, что при этом будут выбраны все полосы прокрутки, присутствующие на странице. Если нужно настроить скроллбар для определенного элемента, необходимо применить это свойство к конкретному элементу:
  1. ::-webkit-scrollbar-thumb — Это ползунок скроллбара ( чем вы держите и прокручиваете страницу ). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:
  1. ::-webkit-scrollbar-track — позволяет настроить трек скроллбара ( путь движения ползунка ). Синтаксис псевдоэлемента для CSS scroll :
  1. ::-webkit-scrollbar-button — разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов ( или левого и правого для горизонтальных полос прокрутки ):
  1. ::-webkit-scrollbar-corner — позволяет справиться с ситуацией, когда появляются обе полосы прокрутки и пересекаются в углу:

Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS .

Настройка скроллбара с помощью Jquery

Если вам нравится программирование front-end , вы можете использовать Jquery-плагин JScrollPane . Он довольно прост в использовании. После того, как вы загрузили и подключили соответствующие файлы в заголовке документа, нужно вызвать одну Javascript-функцию для инициализации панели прокрутки. Вы можете легко изменить дизайн полосы прокрутки с помощью CSS или выбрать одну из существующих тем.

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

Если вы захотите изменить настройки CSS scroll по умолчанию, предоставленные JScrollPane , нужно редактировать стили соответствующих элементов:

Вывод

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

Данная публикация представляет собой перевод статьи « Scrollbar styling using CSS and Jquery » , подготовленной дружной командой проекта Интернет-технологии.ру

Дата публикации: 2018−12−24

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit.

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

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью [email protected]

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

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

Я вставлю экземпляр здесь:

Автор: Chris Coyier

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Перевод: Влад Мержевич

Вернёмся назад, когда вы могли настроить скроллбары в 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 используются пользовательские скроллбары для фрагментов кода, которые также довольно хороши. Они визуально менее насыщенные, из-за чего не очень сочетаются с подсветкой кода.

НАШ САЙТ РЕКОМЕНДУЕТ:

Метки:  

JS scrollbar, стилизация скроллбара

Жутко не люблю JS, но без него порой никуда, т.к. не всегда есть изящные решения базирующиеся исключительно на css и html.

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

Ни для кого не секрет, что с помощью css можно задать цвет скроллбара для браузеров Opera и IE начиная с версии 5. А другие браузеры эти свойства просто не поддерживают, т.к. они не соответсвутют W3C стандартам на данный момент.

И тут для изменения дизайна скроллбара на помощь приходит JS. На данный момент решений, которые справляются с подобной задачей достаточно много, но мне больше всех понравился fleXcroll, the scroll bar customize script проекта HESIDO.

Скрипт является бесплатным для некоммерческого использования, а при использование скрипта на коммерческих сайтах придется заплатить 30$ за размещение скрипта на одном сайте или 70$ за неограниченное использование скрипта.

Больше всего из предложенных версий мне понравился минималистичный вариант скролла, который и прикладываю в архиве:

Следует отметить, что при использование свойств float для div контейнеров внутри скролла, высота скролла задается, как высота последнего контейнера в коде, что затрудняет использование скрипта, я вылечил это тем, что поместил float div`ы в таблицу:

  1. <table><tr><td>
  2. <div></div>
  3. <div></div>
  4. </td></tr></table>

К достоинствам скрипта можно отнести, то что с отключенным JS, скроллбар отрисовывается браузером, что сохраняет функционал сайта.

лучшие пользовательские плагины браузера javascript и jQuery плагины

Полоса прокрутки является единственным компонентом окна, который вы не можете настроить по своему желанию с помощью css (по крайней мере, не в Firefox, т. Е. В Opera и т. Д.), Поэтому вам необходимо реализовать эту функцию с помощью Javascript.

Но есть много вариантов, которые могут перейти к моему дизайну? Посмотрите нашу коллекцию из 7 лучших плагинов полосы прокрутки, написанных на Javascript или jQuery.

Github | демонстрация

Tiny Scrollbar — это красивый и элегантный способ прокрутки контента на мобильных и настольных устройствах. Это разработано, чтобы быть динамической легкой утилитой. Кроме того, он предоставляет конструктору пользовательских интерфейсов мощный способ улучшить пользовательский интерфейс (веб-интерфейс) веб-сайта.

Он написан как ванильный Javascript microlib и как плагин jQuery.

Поддержка браузера отличается между плагином jQuery и простой микровибой Javascript. В частности, простая микровиб Javascript не поддерживает устаревшие браузеры, такие как IE6-8. Используйте релиз плагина jQuery, если требуется поддержка этих браузеров.

  • Поддержка IOS и Android.
  • Доступен как плагин jQuery и ванильный микролиб Javascript.
  • Поддержка AMD, Node, requirejs и commonjs.
  • Можно прокрутить вертикально или горизонтально.
  • Поддерживает прокрутку с помощью колеса, большого пальца, трека или касания.
  • У него есть метод обновления, поэтому он может обрабатывать (асинхронные) изменения содержимого.
  • Размер дорожки и большого пальца можно установить на авто или фиксированное число.
  • Легко настраиваемый.
  • Поддерживает обычную и мобильную инвертированную прокрутку.
  • Примеры можно увидеть на этой странице, загрузив zip или Вот.
  • Легкий, маленький и чистый код.

Github | демонстрация

SlimScroll — это небольшой (4,6 КБ) и настраиваемый плагин jQuery, который превращает любой div в область с возможностью прокрутки и имеет красивую полосу прокрутки — похожую на ту, которую Facebook и Google начали использовать в своих продуктах недавно. SlimScroll не занимает визуальное пространство, так как он появляется только при наведении мышью на пользователя. Пользователь может перетащить полосу прокрутки или использовать колесико мыши, чтобы изменить значение прокрутки.

Github | демонстрация

Enscroll — это плагин jQuery, который дает вам возможность заменить полосы прокрутки, отображаемые в веб-браузере, на те, которые вы разрабатываете. Либо замените полосы прокрутки своим собственным изображением, либо используйте пользовательский CSS, чтобы придать им стиль в любом случае.

Github | демонстрация

jScrollPane — это кросс-браузерный плагин jQuery от Kelvin Luck, который преобразует полосы прокрутки браузера по умолчанию (для элементов с соответствующим свойством переполнения) в структуру HTML, которую можно легко создать с помощью CSS.

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

Github | демонстрация

perfect-scrollbar — это минималистичный плагин для полосы прокрутки, который также работает с jQuery или vanilla JavaScript.

  • perfect-scrollbar имеет некоторые требования, но не меняет и не добавляет стиль оригинальным элементам.
  • perfect-scrollbar не имеет ширины или высоты. Он фиксируется на правой и нижней стороне контейнера.
  • Вы можете изменить почти все стили CSS на полосе прокрутки. Дизайн полосы прокрутки не зависит от сценариев.
  • perfect-scrollbar поддерживает функцию обновления. Всякий раз, когда вам нужно обновить размер или положение полосы прокрутки, просто обновите.
  • Кроме того, perfect-scrollbar использует scrollTop и scrollLeft, а не абсолютное позиционирование или что-то грязное.
  • perfect-scrollbar прекрасно поддерживает RTL как в браузерах на базе WebKit, так и в Gecko.

Gtihub | демонстрация

Nicescroll 3 — это плагин jquery для красивых полос прокрутки с очень похожим стилем ios / mobile. Также поддерживает горизонтальную полосу прокрутки, простое в использовании решение для создания настраиваемых полос прокрутки, совместимых с устройствами destkop, tablet и phone. Поддерживает div's, iframes, textareaи полосы прокрутки страницы документа (тела).

  • Простая установка и активация, она работает без модификации вашего кода.
  • Очень стильные полосы прокрутки, не занимающие вашего окна (оригинальные полосы прокрутки браузера требуют некоторого пространства страницы и уменьшают полезную ширину окна / деления).
  • Вы можете стилизовать полосу прокрутки основного документа (тело).
  • Во всех браузерах вы можете прокручивать: перетаскивание курсора, колесико мыши (скорость настраивается), навигация с помощью клавиатуры (клавиши курсора, клавиши pagup / down, клавиши home / end).
  • Прокрутка плавная (как у современных планшетов), скорость настраиваемая.
  • Функция масштабирования.
  • Аппаратная ускоренная прокрутка (при наличии).
  • Поддержка кадров анимации для простой прокрутки и сохранения процессора.
  • режим перетаскивания с прокруткой импульса (в качестве сенсорного устройства).
  • Протестировано для всех основных браузеров настольных и мобильных версий.
  • Поддержка сенсорных устройств.
  • Поддержка устройств с несколькими входами (IE10 с MSPointer).
  • Совместим со многими другими браузерами, включая IE6, Safari на Mac и WP7 Mango.
  • Очень настраиваемый аспект бара.
  • Нативные события прокрутки еще работают.
  • Полностью интегрирован с JQuery.
  • Совместимость с jQuery UI, jQuery Touch, jQuery Mobile.

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

Github | демонстрация

Полоса прокрутки jQuery — это настраиваемая CSS-панель прокрутки с расширенными возможностями:

  • Легко реализовать.
  • Нет фиксированной высоты или ширины.
  • Адаптивная поддержка дизайна.
  • CSS настраиваемый.
  • Стандартное поведение прокрутки.
  • Вертикальная, горизонтальная или обе полосы прокрутки.
  • Автоматически повторно инициализировать полосу прокрутки.
  • Поддержка внешних полос прокрутки.
  • Поддержка браузера: IE7 +, Firefox1, Opera, Chrome, Safari.
  • jQuery Scrollbar как Angular.JS директива.
  • Полоса прокрутки текстовой области.
  • Функция карты страницы.

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

цвет полосы прокрутки | CSS-уловки

Свойство scrollbar-color управляет двумя цветами полосы прокрутки: цветом ползунка и цветом дорожки . scrollbar-color является частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым на момент написания этой статьи еще не завершена.

До scrollbar-color у разработчиков не было стандартного способа изменить внешний вид полос прокрутки браузера по умолчанию, не прибегая к скрытию полосы прокрутки с помощью переполнения : скрыто и рендеринга полос прокрутки на основе JavaScript или использования атрибутов полосы прокрутки с префиксом браузера.С другой стороны, с scrollbar-color мы можем стилизовать полосу прокрутки в соответствии с дизайном, не прибегая к повторному использованию функций браузера или использованию префиксов поставщиков.

  .scrollable-element {
  цвет полосы прокрутки: красный желтый;
}  
Не бойтесь настраивать цвета

scrollbar-color также принимает значения dark и light , чтобы соответствовать предпочтениям пользователя, если они используют что-то вроде темного режима в Mac OSX.

 .scrollable-element {
  цвет полосы прокрутки: темный;
}  

По состоянию на март 2019 года поддержка значений dark и light недоступна ни в одном браузере. поддерживается в Firefox. См. Подробности в разделе поддержки браузера ниже.

Синтаксис

  цвет полосы прокрутки: авто | темный | свет | <цвет>;  

Значения

scrollbar-color принимает следующие значения:

  • auto является значением по умолчанию и будет отображать стандартные цвета полосы прокрутки для пользовательского агента.
  • dark укажет пользовательскому агенту использовать более темные полосы прокрутки для соответствия текущей цветовой схеме.
  • light укажет агенту пользователя использовать более светлые полосы прокрутки для соответствия текущей цветовой схеме.
  • <цвет> определяет два цвета, которые будут использоваться для полосы прокрутки. Первый цвет предназначен для «большого пальца» или подвижной части полосы прокрутки, которая появляется сверху. Второй цвет предназначен для «дорожки» или фиксированной части полосы прокрутки.

Пример

Он сочетает в себе новый синтаксис спецификации и префикс WebKit.

Поддержка браузера

Desktop
Chrome Firefox IE Edge Safari
92 * 88 11 89 * TP *
Мобильный / планшет
Android Chrome Android Firefox Android iOS Safari
88 * Нет 81 * 14.0-14,4 *

Связанные

ресурса

ширина полосы прокрутки | CSS-уловки

Свойство scrollbar-width в CSS управляет шириной или «толщиной» полосы прокрутки. scrollbar-width является частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым еще не завершена. На момент написания этой статьи консенсус был в том, что ширины полосы прокрутки , вероятно, будет включен в будущие версии CSS, но есть споры о том, будет ли разрешен аргумент переменной , или будут ли параметры ограничены предварительно установленными значениями (подробнее об этом позже).

Регулировка ширины полосы прокрутки особенно важна на страницах или пользовательских интерфейсах с ограниченным пространством, где обрезка всего нескольких пикселей от полосы прокрутки (или ее полное удаление) может дать контенту достаточно места для дыхания, не удаляя возможность прокрутки.

Например, представьте себе интерфейс редактирования текста, в котором