---
title: "Scrollbar: модуль Swiper.js. Документация на русском. - WebTolk"
description: "Свойства, методы и события модуля Scrollbar для Swiper.js на русском языке. Документация для разработчиков."
url: "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-scrollbar"
date: "2026-06-20T04:43:41+00:00"
language: "ru-RU"
---

# Модули: Scrollbar

WT JSwiper - SWiper.js для Joomla-разработчиков - Документация

**Категория:** [Плагины Joomla](https://web-tolk.ru/dev/joomla-plugins)

[Проект](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper)[Версии](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/versions)[Документация](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation)[GitHub](https://github.com/WebTolk/WT-JSwiper-Joomla-web-asset-plugin)[JED](https://extensions.joomla.org/extension/core-enhancements/libraries/wt-jswiper/)

Свойства, методы и события модуля Scrollbar для Swiper.js.

## Scrollbar

Полоса прокрутки слайдера Swiper.js.

---

### Параметры Scrollbar

#### dragClass

Тип: `string`

Значение по умолчанию: `swiper-scrollbar-drag`

##### Описание

CSS класс перемещаемого элемента.

#### dragSize

Тип: `number | 'auto'`

Значение по умолчанию: `auto`

##### Описание

Размер перемещаемого элемента полосы прокрутки в пикселях.

#### draggable

Тип: `boolean`

Значение по умолчанию: `false`

##### Описание

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

#### el

Тип: `any`

Значение по умолчанию: `null`

##### Описание

Строка с CSS-селектором или HTMLElement контейнера скролбара.

#### enabled

Тип: `boolean`

Значение по умолчанию: `нет`

##### Описание

Включена полоса прокрутки или нет. Логический флаг для использования скролбара на определённых разрешениях экрана (с определенными брейкпоинтами).

#### hide

Тип: `boolean`

Значение по умолчанию: `true`

##### Описание

Включена полоса прокрутки или нет. Логический флаг для использования скролбара на определённых разрешениях экрана (с определенными брейкпоинтами).

#### horizontalClass

Тип: `string`

Значение по умолчанию: `swiper-scrollbar-horizontal`

##### Описание

CSS класс полосы прокрутки слайдера в горизонтальной ориентации.

#### lockClass

Тип: `string`

Значение по умолчанию: `swiper-scrollbar-lock`

##### Описание

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

#### scrollbarDisabledClass

Тип: `string`

Значение по умолчанию: `swiper-scrollbar-disabled`

##### Описание

CSS класс, добавляемый к контейнеру Swiper и полосе прокрутки при отключении из-за не попадания в брейкпоинт (текущее разрешение экрана не попадает в указанный диапазон).

#### snapOnRelease

Тип: `boolean`

Значение по умолчанию: `false`

##### Описание

Установите `true` для прокрутки слайдера к ближайшему слайду после того, как вы отпустили скролбар.

#### verticalClass

Тип: `string`

Значение по умолчанию: `swiper-scrollbar-vertical`

##### Описание

CSS класс для полосы прокрутки слайдера в вертикальной ориентации.

### Методы Scrollbar

Свойства

#### swiper.dragEl

Тип: `HTMLElement[]`

##### Описание

HTMLElement перетаскиваемого элемента скролбара.

#### swiper.el

Тип: `HTMLElement[]`

##### Описание

HTMLElement контейнера скролбара.

Методы

#### swiper.destroy()

Тип: `нет`

##### Описание

Уничтожение объекта скролбара

#### swiper.init()

Тип: `нет`

##### Описание

Инициализация скролбара

#### swiper.setTranslate()

Тип: `нет`

##### Описание

Обновляет переход скролбара.

#### swiper.updateSize()

Тип: `нет`

##### Описание

Обновление размеров пути скролбара и перемещаемого элемента.

### События Scrollbar

#### scrollbarDragEnd

Аргумент: `(swiper, event)`

##### Описание

Событие вызывается в момент окончания перетаскивания скролбара.

#### scrollbarDragMove

Аргумент: `(swiper, event)`

##### Описание

Событие вызывается в процессе перетаскивания скролбара.

#### scrollbarDragStart

Аргумент: `(swiper, event)`

##### Описание

Событие вызывается в момент начала перетаскивания скролбара.

### CSS-переменные Scrollbar Swiper.js

```
{
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
}
```

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/dev",
                "name": "Расширения Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "/dev/joomla-plugins",
                "name": "Плагины Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 4,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper",
                "name": "WT JSwiper - SWiper.js для Joomla-разработчиков"
            }
        },
        {
            "@type": "ListItem",
            "position": 5,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper/documentation",
                "name": "Документация"
            }
        },
        {
            "@type": "ListItem",
            "position": 6,
            "item": {
                "name": "Модули: Scrollbar"
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-scrollbar",
            "name": "Scrollbar: модуль Swiper.js. Документация на русском. - WebTolk",
            "description": "Свойства, методы и события модуля Scrollbar для Swiper.js на русском языке. Документация для разработчиков.",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/TechArticle/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "TechArticle",
            "headline": "Модули: Scrollbar",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-scrollbar",
            "description": "Свойства, методы и события модуля Scrollbar для Swiper.js.",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-module-scrollbar"
            },
            "keywords": [
                "swiper",
                " swiper js",
                " swiper modules",
                " swiper Scrollbar "
            ]
        }
    ]
}
```