From 083a83f0b80c53ce9fac5ae4f67730172f91e736 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Wed, 8 Jun 2022 11:36:03 +0300
Subject: [PATCH] feat(scrollbar): add directional classes to scrollbar
 container

---
 src/modules/scrollbar/scrollbar.js   | 10 ++++++++++
 src/modules/scrollbar/scrollbar.less |  6 ++++--
 src/modules/scrollbar/scrollbar.scss |  6 ++++--
 src/types/modules/scrollbar.d.ts     | 14 ++++++++++++++
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/modules/scrollbar/scrollbar.js b/src/modules/scrollbar/scrollbar.js
index 469a1a3e3..4b2603177 100644
--- a/src/modules/scrollbar/scrollbar.js
+++ b/src/modules/scrollbar/scrollbar.js
@@ -24,6 +24,8 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
       lockClass: 'swiper-scrollbar-lock',
       dragClass: 'swiper-scrollbar-drag',
       scrollbarDisabledClass: 'swiper-scrollbar-disabled',
+      horizontalClass: `swiper-scrollbar-horizontal`,
+      verticalClass: `swiper-scrollbar-vertical`,
     },
   });
 
@@ -271,6 +273,8 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
       $el = $swiperEl.find(params.el);
     }
 
+    $el.addClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
+
     let $dragEl = $el.find(`.${swiper.params.scrollbar.dragClass}`);
     if ($dragEl.length === 0) {
       $dragEl = $(`<div class="${swiper.params.scrollbar.dragClass}"></div>`);
@@ -293,6 +297,12 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
     }
   }
   function destroy() {
+    const params = swiper.params.scrollbar;
+    const $el = swiper.scrollbar.$el;
+    if ($el) {
+      $el.removeClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
+    }
+
     disableDraggable();
   }
 
diff --git a/src/modules/scrollbar/scrollbar.less b/src/modules/scrollbar/scrollbar.less
index ab9c773e2..57bd9f284 100644
--- a/src/modules/scrollbar/scrollbar.less
+++ b/src/modules/scrollbar/scrollbar.less
@@ -8,7 +8,8 @@
   &.swiper-scrollbar-disabled {
     display: none !important;
   }
-  .swiper-horizontal > & {
+  .swiper-horizontal > &,
+  &.swiper-scrollbar-horizontal {
     position: absolute;
     left: 1%;
     bottom: 3px;
@@ -16,7 +17,8 @@
     height: 5px;
     width: 98%;
   }
-  .swiper-vertical > & {
+  .swiper-vertical > &,
+  &.swiper-scrollbar-vertical {
     position: absolute;
     right: 3px;
     top: 1%;
diff --git a/src/modules/scrollbar/scrollbar.scss b/src/modules/scrollbar/scrollbar.scss
index ab9c773e2..57bd9f284 100644
--- a/src/modules/scrollbar/scrollbar.scss
+++ b/src/modules/scrollbar/scrollbar.scss
@@ -8,7 +8,8 @@
   &.swiper-scrollbar-disabled {
     display: none !important;
   }
-  .swiper-horizontal > & {
+  .swiper-horizontal > &,
+  &.swiper-scrollbar-horizontal {
     position: absolute;
     left: 1%;
     bottom: 3px;
@@ -16,7 +17,8 @@
     height: 5px;
     width: 98%;
   }
-  .swiper-vertical > & {
+  .swiper-vertical > &,
+  &.swiper-scrollbar-vertical {
     position: absolute;
     right: 3px;
     top: 1%;
diff --git a/src/types/modules/scrollbar.d.ts b/src/types/modules/scrollbar.d.ts
index b49c9629e..63a9e3c74 100644
--- a/src/types/modules/scrollbar.d.ts
+++ b/src/types/modules/scrollbar.d.ts
@@ -123,4 +123,18 @@ export interface ScrollbarOptions {
    * @default 'swiper-scrollbar-disabled'
    */
   scrollbarDisabledClass?: string;
+
+  /**
+   * CSS class name set to scrollbar in horizontal Swiper
+   *
+   * @default 'swiper-scrollbar-horizontal'
+   */
+  horizontalClass?: string;
+
+  /**
+   * CSS class name set to scrollbar in vertical Swiper
+   *
+   * @default 'swiper-scrollbar-vertical'
+   */
+  verticalClass?: string;
 }