feat(scrollbar): allow scrollbar to be enabled/disabled in breakpoints

nolimits4web · May 30, 2022 · 3f09fc7 · 3f09fc7
1 parent d748d49
commit 3f09fc7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/src/modules/scrollbar/scrollbar.js b/src/modules/scrollbar/scrollbar.js
@@ -23,6 +23,7 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
       snapOnRelease: true,
       lockClass: 'swiper-scrollbar-lock',
       dragClass: 'swiper-scrollbar-drag',
+      scrollbarDisabledClass: 'swiper-scrollbar-disabled',
     },
   });
 
@@ -218,6 +219,7 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
   function events(method) {
     const { scrollbar, touchEventsTouch, touchEventsDesktop, params, support } = swiper;
     const $el = scrollbar.$el;
+    if (!$el) return;
     const target = $el[0];
     const activeListener =
       support.passiveListener && params.passiveListeners
@@ -241,11 +243,11 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
   }
 
   function enableDraggable() {
-    if (!swiper.params.scrollbar.el) return;
+    if (!swiper.params.scrollbar.el || swiper.scrollbar.el) return;
     events('on');
   }
   function disableDraggable() {
-    if (!swiper.params.scrollbar.el) return;
+    if (!swiper.params.scrollbar.el || swiper.scrollbar.el) return;
     events('off');
   }
   function init() {
@@ -295,9 +297,14 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
   }
 
   on('init', () => {
-    init();
-    updateSize();
-    setTranslate();
+    if (swiper.params.navigation.enabled === false) {
+      // eslint-disable-next-line
+      disable();
+    } else {
+      init();
+      updateSize();
+      setTranslate();
+    }
   });
   on('update resize observerUpdate lock unlock', () => {
     updateSize();
@@ -318,7 +325,27 @@ export default function Scrollbar({ swiper, extendParams, on, emit }) {
     destroy();
   });
 
+  const enable = () => {
+    swiper.$el.removeClass(swiper.params.scrollbar.scrollbarDisabledClass);
+    if (swiper.scrollbar.$el) {
+      swiper.scrollbar.$el.removeClass(swiper.params.scrollbar.scrollbarDisabledClass);
+    }
+    init();
+    updateSize();
+    setTranslate();
+  };
+
+  const disable = () => {
+    swiper.$el.addClass(swiper.params.scrollbar.scrollbarDisabledClass);
+    if (swiper.scrollbar.$el) {
+      swiper.scrollbar.$el.addClass(swiper.params.scrollbar.scrollbarDisabledClass);
+    }
+    destroy();
+  };
+
   Object.assign(swiper.scrollbar, {
+    enable,
+    disable,
     updateSize,
     setTranslate,
     init,

diff --git a/src/modules/scrollbar/scrollbar.less b/src/modules/scrollbar/scrollbar.less
@@ -4,6 +4,10 @@
   position: relative;
   -ms-touch-action: none;
   background: rgba(0, 0, 0, 0.1);
+  .swiper-scrollbar-disabled > &,
+  &.swiper-scrollbar-disabled {
+    display: none !important;
+  }
   .swiper-horizontal > & {
     position: absolute;
     left: 1%;

diff --git a/src/modules/scrollbar/scrollbar.scss b/src/modules/scrollbar/scrollbar.scss
@@ -4,6 +4,10 @@
   position: relative;
   -ms-touch-action: none;
   background: rgba(0, 0, 0, 0.1);
+  .swiper-scrollbar-disabled > &,
+  &.swiper-scrollbar-disabled {
+    display: none !important;
+  }
   .swiper-horizontal > & {
     position: absolute;
     left: 1%;

diff --git a/src/types/modules/scrollbar.d.ts b/src/types/modules/scrollbar.d.ts
@@ -112,4 +112,11 @@ export interface ScrollbarOptions {
    * @default 'swiper-scrollbar-drag'
    */
   dragClass?: string;
+
+  /**
+   * CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint
+   *
+   * @default 'swiper-scrollbar-disabled'
+   */
+  scrollbarDisabledClass?: string;
 }