Custom scrollbars in webkit

Events

customScroll

Triggered whenever content is scrolled. Separate events are fired when vertical and horizontal scrollbar is moved.

Handler function takes two arguments. is standard jquery event object. is an object with 3 fields holding scroll specific information:

• – floating point number in range 0.0 to 100.0 indicating percentage position of the scrollbar
• – string that can take following 4 values: , , , – indicates what direction the scrollbar was moved in
• – string indicating which scrollbar was moved: for horizontal scrollbar and for vertical scrollbar

You can also bind handler to that event when initializing scrollbar:

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

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

Вот три способа определить, когда элемент находится в видимой области окна:

1. Использовать Intersection Observer API
2. Измерять смещение элемента при скролле страницы
3. Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

API-интерфейс Intersection Observer позволяет отслеживать момент пересечения одного элемента с другим, и сообщает, когда это происходит. Этот способ идеально подходит для запуска CSS-анимации при скролле страницы. Всё, что нужно знать — когда HTML-элемент пересекается с окном просмотра. Если он пересекается, значит — находится в видимой области окна и в этот момент надо запустить CSS-анимацию.

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

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

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

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

Собираем всё вместе

Обратите внимание, что — это объект, предоставленный наблюдателем, а — это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

See this code Use IntersectionObserver API for add class name on x.xhtml.ru.

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

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

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

Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:

See this code Use IntersectionObserver API for add-remove class name on x.xhtml.ru.

Теперь — порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

Customizing a scrollbar design

Example 1

Before diving into customizing the scrollbar, it’s worth talking about the default style in Mac OS. Here is how it looks:

• The scrollbar track has a border on the left and right sides, with a solid background color.
• The scrollbar thumb is rounded and with space around it from the left and right sides.

For windows, it’s a bit different.

Here is how we can customize the scrollbar based on the mockup above.

Adding the for both the track and thumb is necessary, as it won’t work on the .

With the new syntax, we can’t adjust the of the scrollbar, and what’s only possible is to change the track and thumb background color.

Note: the next examples only work with the syntax. For a real-life project, you can add both the and the new syntax.

Example 2

For this example, the design is a bit heavier as it contains gradients and shadows. Is that doable? Yes, we can apply inner shadows and gradients to mimic that effect. Let’s see how!

See the Pen
Custom Scrollbar — 2 by Ahmad Shadeed (@shadeed)
on CodePen.

Example 3

We can also add borders to the thumb and track, which can help us with some tricky designs.

Based on the same example, we can reset the top and bottom borders to and get an interesting effect for the thumb. Notice those little elements at the top and bottom of the thumb.

See the Pen
Custom Scrollbar — 3 by Ahmad Shadeed (@shadeed)
on CodePen.

Example 4

In this example, we want the scrollbar thumb to have an offset from all sides. Since it’s not possible to use with the scrollbar properties, we need a hack around that using CSS borders and . I learned about this idea from this great article by Gabriel Romualdo.

By default, when an element has a background and border, the browser will clip the .

Consider the following example:

We have a button with a black border. It doesn’t have padding for the sake of explaining the concept. Suppose that is set to , the border will be included within the size of the button. As a result, the border is appearing above the background.

Now, when we apply , the background will only appear around the content.

I hope the idea is clear. Let’s get back into the scrollbar thumb. To mimic the effect, we need to add the following:

And we’re done.

See the Pen
Custom Scrollbar — 4 by Ahmad Shadeed (@shadeed)
on CodePen.

With that, we have explored how to customize different scrollbar designs. For Firefox, we can use the new syntax but again, it’s limited only to the thickness and solid colors.

Настройка

Знаки впадины на вертикальной полосе прокрутки во время поиска в браузере Google Chrome

Возможности и конкретные методы, необходимые для настройки внешнего вида и функций полос прокрутки, могут значительно различаться в зависимости от того, какую операционную систему или программное приложение вы пытаетесь настроить. Распространенным методом изменения внешнего вида полосы прокрутки на веб-страницах является использование директив CSS для изменения цвета полосы прокрутки. Они нестандартны и поддерживаются только Microsoft Internet Explorer версии 5.x или выше и Opera . А в браузерах на основе WebKit есть псевдоэлементы, называемые:

• и

WebKit также предоставляет множество псевдоклассов для изменения стиля полос прокрутки.

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

Custom Scrollbar Limitations and Alternatives

There are clearly some problems with creating custom scrollbars. The first would be the lack of cross-browser support. Other issues would be the lack of ability to add transitions or animations to the scrollbar and the fact your custom scrollbar won’t appear on mobile devices.

An alternative is hiding the default scrollbar and using a library, but this may effect performance when used as main scrollbar for your page. And there are other potential usability issues because these libraries rely on JavaScript to imitate the native scrollbar behavior.

Below I’ll go over two popular open-source libraries for making scrollbars.

SimpleBar Library

Grsmto/simplebar
Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser. — Grsmto/simplebar

GrsmtoGitHub

As the name tells you, SimpleBar is all about making it easy to create custom scrollbars. The only real downside here is that it doesn’t support usage as the main scrollbar for your website or for table, text area, or select HTML elements.

The main purpose of SimpleBar would be for creating custom scrollbars for things like dynamic chat applications or any other type of internal page element where you want scrolling.

KingSora/OverlayScrollbars
A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling. — KingSora/OverlayScrollbars

KingSoraGitHub

Overlay Scrollbars is very similar to SimpleBar but has the added benefit of supporting the HTML body element. This means that you can use it for the main scrollbar of your website in addition to all the other features you would expect like cross-browser and mobile support.

Methods

Click on the method name to open a more detailed documentation.

Instance methods:

//get options
var options = instance.options();
//set options
instance.options({ className : null });

//soft update
instance.update();
//hard update
instance.update(true);

//put the instance to sleep
instance.sleep();

//get scroll information
var scrollInfo = instance.scroll();
//scroll 50px on both axis
instance.scroll(50);
//add 10px to the scroll offset of each axis
instance.scroll({ x : "+=10", y : "+=10" });
//scroll to 50% on both axis with a duration of 1000ms
instance.scroll({ x : "50%", y : "50%" }, 1000);
//scroll to the passed element with a duration of 1000ms
instance.scroll($(selector), 1000);

//scroll-animation duration is 10 seconds
instance.scroll({ y : "100%" }, 10000);
//abort the 10 seconds scroll-animation immediately
instance.scrollStop();
//scroll-animation duration is 1 second
instance.scroll({ y : "100%" }, 1000);

//get the element to which the plugin was applied
var pluginTarget = instance.getElements().target;

//get the state of the plugin instance
var pluginState = instance.getState();

//destroy the instance
instance.destroy();

//get the instance of the extension "myExtension"
var extensionInstance = instance.ext("myExtension");

//add the registered extension "myExtension" to the plugin instance
var extensionInstance = instance.addExt("myExtension");

//add the registered extension "myExtension" to the plugin instance
instance.addExt("myExtension");
//remove the added extension "myExtension" from the plugin instance
instance.removeExt("myExtension");

Global methods:

//get the current defaultOptions
var defaultOptions = OverlayScrollbars.defaultOptions();
//set new default options
OverlayScrollbars.defaultOptions({
    className : "my-custom-class",
    resize    : "both"
});

//get the global information
var globals = OverlayScrollbars.globals();

//register a dummy extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", function() { return { }; });
//unregister the extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", null);
//get the extension-object with the name "myExtension"
var registeredExtension = OverlayScrollbars.extension("myExtension");
//get all registered extension-objects
var extensionObjects = OverlayScrollbars.extension();

//create OverlayScrollbars instance
var osInstance = OverlayScrollbars(document.body, { });
//returns true
OverlayScrollbars.valid(osInstance);
//destroy the instance
osInstance.destroy();
//returns false
OverlayScrollbars.valid(osInstance);
//returns false
OverlayScrollbars.valid({ });

Методы, унаследованные от класса Control

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Options

There are some options you can pass when initializing scrollbar:

For example:

Настраиваемые полоски прокрутки на Envato Market

Если вы ищете готовое решение, Envato Market предлагает широкий выбор scrollbars, которые вы можете подключить к вашему сайту для достижения ряда эффектов. Вот некоторые из них:

1. Lazybars — Themeable responsive scrollbar jQuery plugin

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

Используйте темы, связанные с Lazybars или создайте свои собственные с помощью простых CSS.

Lazybars — мощный гибкий плагин прокрутки jQuery

2. Fancy Scrollbar — WordPress

“Fancy Scrollbar – WordPress”  — это плагин, который может создавать пользовательскую полосу прокрутки на сайтах WordPress. У него есть много вариантов настройки. Можно настроить цвет, эффекты, прокрутку, полосу и многое другое.

Fancy Scrollbar — WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar — настраиваемый плагин jQuery для полосы прокрутки вашего сайта WordPress. С помощью этого плагина вы можете настроить свою полосу прокрутки веб-страницы, и встраивать пользовательскую полосу прокрутки по шорткоду в любом месте.

Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller предоставляет полосу прокрутки для вашего сайта, которую вы легко можете настроить с помощью CSS, если трёх выделенных скинов недостаточно. Он поставляется с расширенными функциональными возможностями, такими как прокрутка при наведении или выцветание при отпускании мыши. И это работает на iPhone / iPad.

DZS Scroller

5. CSS3 Scrollbar Styles

Легко использовать красивую и красочную полосу прокрутки CSS3 для вашего сайта. Просто вставьте в существующий файл CSS и наслаждайтесь новой CSS3 Scrollbar.

CSS3 Scrollbar Styles

Specifying the scope of the custom scrollbar

An important thing to know is that where to customize the scrollbar. Do you want the style to be generic and work for all scrollbars on the website? Or do you want it for specific sections only?

With the old syntax, we can write the selectors without attaching them to an element, and they will be applied to all scrollable elements.

However, if you want to apply for a specific section only, you need to append the element before the selectors.

For the new syntax, it’s almost the same. The thing that I noticed is that if you want a generic style, it should be applied to the element, not the .

I tried adding the above for the but it didn’t work as expected.

Now that we know how the old and new syntax work, let’s get into customizing some scrollbar designs.

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

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

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

::webkit-scrollbar — позволяет настроить ширину и цвет полосы прокрутки. Когда этот псевдоэлемент указан, WebKit выключает свой встроенный рендеринг скроллбара и использует настройки, указанные для div scroll CSS

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

/* Для всех скроллбаров */
::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}

/* Для определенных скроллбаров */
.mybox::-webkit-scrollbar {
    width: 12px;
    background-color: #434343;
}

::-webkit-scrollbar-thumb – Это ползунок скроллбара (чем вы держите и прокручиваете страницу). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:

::-webkit-scrollbar-thumb {
    width: 8px;
    background-image: -webkit-linear-gradient(#F5F5F5, #8A8A8A);
}

::-webkit-scrollbar-track – позволяет настроить трек скроллбара (путь движения ползунка). Синтаксис псевдоэлемента для CSS scroll:

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border: 1px solid black;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-button – разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов (или левого и правого для горизонтальных полос прокрутки):

::-webkit-scrollbar-button {
    background-color: #7c2929;
}

::-webkit-scrollbar-corner – позволяет справиться с ситуацией, когда появляются обе полосы прокрутки и пересекаются в углу:

::-webkit-scrollbar-corner {
    background-color: #b3b3b3;
}

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

Ограничения и проблемы

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

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

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

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

How to Create Custom Scrollbars with CSS

With our setup out of the way, we can jump into the fun part of the tutorial. The first part of this section will be learning the various CSS properties available to use for styling.

In the second part we’ll implement four different types of scrollbars to give you some ideas for making your own scrollbars.

Unfortunately we still don’t have any standardized cross-browser support for styling scrollbars with CSS. Firefox and Webkit-based browsers like Chrome, Edge, and Safari have different properties for styling.

This tutorial will mainly focus on Webkit browsers, because they offer more options for styling, but we will briefly cover Firefox as well.

• – the entire scrollbar
• – the entire progress bar area of the scrollbar
• – the draggable section of the scrollbar

The below properties are available but are less commonly used:

• – the up/down buttons at each end of the scrollbar
• – part of scrollbar not covered by the thumb
• – bottom corner where horizontal and vertical scrollbars meet

There are currently two available CSS properties for styling scrollbars in Firefox

• – controls width of scrollbar, with only two options available being or
• – takes two colors which are used for the coloring of the thumb and track of the scrollbar in that order

Now that you know your options for customizing scrollbars, let’s put it into practice with some examples.

Dark theme websites are all the rage right now. Sticking with the default browser scrollbar could come off as jarring to users because it doesn’t fit all that well with a dark themed website.

Let’s use our newfound knowledge of CSS to create a dark theme scrollbar with a rounded border inspired by CSS Tricks’ website:

The result is a little hard to see in the screenshot, but the track is black and the thumb is a darkish gray color.

For this example you’ll be making a minimalist scrollbar. This type of scrollbar would work well if you are going for a simple, elegant style for your website.

The most important thing to note is that you have the ability to use and pseudo-elements from CSS to further style your scrollbar. In this case the scrollbar will turn a darker gray when you hover and drag on the thumb.

The result:

In this section, the focus is on using a repeating linear gradient to create a pattern effect on our scrollbar track. The same could be done for the scrollbar thumb as well.

Another thing to notice is that you can style the scrollbar thumb with a border, which you can use to create a number of cool effects. In this case I made the background color of the thumb transparent so that you can see the scrollbar track pattern as we scroll.

The result:

This example uses a linear gradient and a trick with box shadow to make it look like the scrollbar is changing color as you move up and down the page. What’s really happening is that the background of the scrollbar track is being revealed beneath the thumb.

It works because the box-shadow takes up all the space of the scrollbar except for where the thumb is. Because the thumb is transparent the gradient color of the background shows through.

The result:

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

Меню

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена ​​боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок