feat(core): custom animation for CSS Mode where smooth scrolling is n…

…ot supported

src/core/slide/animateCSSModeScroll.js

@@ -0,0 +1,34 @@
+import { getWindow } from 'ssr-window';
+
+export default function animateCSSModeScroll({ swiper, targetPosition, side }) {
+  const window = getWindow();
+  const currentPosition = -swiper.translate;
+  const frameTime = 1000 / 60;
+  const frames = swiper.params.speed / frameTime;
+  const perFrame = (targetPosition - currentPosition) / frames;
+
+  let progressPosition = currentPosition;
+  swiper.wrapperEl.style.scrollSnapType = 'none';
+  window.cancelAnimationFrame(swiper.cssModeFrameID);
+
+  const dir = targetPosition > currentPosition ? 'next' : 'prev';
+
+  const isOutOfBound = (progress, target) => {
+    return (dir === 'next' && progress >= target) || (dir === 'prev' && progress <= target);
+  };
+
+  const animate = () => {
+    progressPosition += perFrame;
+    if (isOutOfBound(progressPosition, targetPosition)) progressPosition = targetPosition;
+    swiper.wrapperEl.scrollTo({
+      [side]: progressPosition,
+    });
+    if (isOutOfBound(progressPosition, targetPosition)) {
+      swiper.wrapperEl.style.scrollSnapType = '';
+      window.cancelAnimationFrame(swiper.cssModeFrameID);
+      return;
+    }
+    swiper.cssModeFrameID = window.requestAnimationFrame(animate);
+  };
+  animate();
+}

src/core/slide/slidePrev.js

@@ -11,6 +11,7 @@ export default function slidePrev(speed = this.params.speed, runCallbacks = true
     swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
   }
   const translate = rtlTranslate ? swiper.translate : -swiper.translate;
+
   function normalize(val) {
     if (val < 0) return -Math.floor(Math.abs(val));
     return Math.floor(val);
@@ -20,9 +21,16 @@ export default function slidePrev(speed = this.params.speed, runCallbacks = true
 
   let prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1];
   if (typeof prevSnap === 'undefined' && params.cssMode) {
-    snapGrid.forEach((snap) => {
-      if (!prevSnap && normalizedTranslate >= snap) prevSnap = snap;
+    let prevSnapIndex;
+    snapGrid.forEach((snap, snapIndex) => {
+      if (normalizedTranslate >= snap) {
+        // prevSnap = snap;
+        prevSnapIndex = snapIndex;
+      }
     });
+    if (typeof prevSnapIndex !== 'undefined') {
+      prevSnap = snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];
+    }
   }
   let prevIndex;
   if (typeof prevSnap !== 'undefined') {

src/core/slide/slideTo.js

@@ -1,3 +1,5 @@
+import animateCSSModeScroll from './animateCSSModeScroll.js';
+
 export default function slideTo(
   index = 0,
   speed = this.params.speed,
@@ -143,15 +145,14 @@ export default function slideTo(
     if (speed === 0) {
       wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
     } else {
-      // eslint-disable-next-line
-      if (wrapperEl.scrollTo) {
-        wrapperEl.scrollTo({
-          [isH ? 'left' : 'top']: t,
-          behavior: 'smooth',
-        });
-      } else {
-        wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
+      if (swiper.support.smoothScroll) {
+        animateCSSModeScroll({ swiper, targetPosition: t, side: isH ? 'left' : 'top' });
+        return true;
       }
+      wrapperEl.scrollTo({
+        [isH ? 'left' : 'top']: t,
+        behavior: 'smooth',
+      });
     }
     return true;
   }

src/shared/get-support.js

@@ -7,6 +7,8 @@ function calcSupport() {
   const document = getDocument();
 
   return {
+    smoothScroll: 'scrollBehavior' in document.documentElement.style,
+
     touch: !!(
       'ontouchstart' in window ||
       (window.DocumentTouch && document instanceof window.DocumentTouch)