feat(scrollbar): add directional classes to scrollbar container

nolimits4web · Jun 8, 2022 · 083a83f · 083a83f
1 parent 097390d
commit 083a83f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git 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
@@ -8,15 +8,17 @@
   &.swiper-scrollbar-disabled {
     display: none !important;
   }
-  .swiper-horizontal > & {
+  .swiper-horizontal > &,
+  &.swiper-scrollbar-horizontal {
     position: absolute;
     left: 1%;
     bottom: 3px;
     z-index: 50;
     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
@@ -8,15 +8,17 @@
   &.swiper-scrollbar-disabled {
     display: none !important;
   }
-  .swiper-horizontal > & {
+  .swiper-horizontal > &,
+  &.swiper-scrollbar-horizontal {
     position: absolute;
     left: 1%;
     bottom: 3px;
     z-index: 50;
     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
@@ -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;
 }