Change: pause scrolling on touch

README.md

@@ -1,4 +1,6 @@
-# Tiny-Swiper
+<p>
+    <a href="./docs/logo.png" target="_blank"><img width="240" src="./docs/logo.png"></a>
+</p>
 
 [![](https://badge.fury.io/js/tiny-swiper.svg)](https://www.npmjs.com/package/tiny-swiper)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/tiny-swiper)](https://www.npmjs.com/package/tiny-swiper)
@@ -7,6 +9,8 @@
 
 📦 2kb gzipped library alternative to SwiperJS with the same modern API.
 
+***
+
 ## Getting start
 
 - [Getting Started Guide](#guide-to-usage)

lib/index.js

@@ -62,6 +62,25 @@
   function detectTouch() {
     return Boolean('ontouchstart' in window || window.navigator.maxTouchPoints > 0 || window.navigator.msMaxTouchPoints > 0 || window.DocumentTouch && document instanceof DocumentTouch);
   }
+  /**
+   * get Element transform
+   * @param {HTMLElement} el
+   * @param {Boolean} isHorizontal
+   * @returns {Number}
+   */
+
+  function getTranslate(el, isHorizontal) {
+    var matrix = getComputedStyle(el).transform.replace(/[a-z]|\(|\)|\s/g, '').split(',').map(parseFloat);
+    var arr;
+
+    if (matrix.length === 16) {
+      arr = matrix.slice(12, 14);
+    } else if (matrix.length === 6) {
+      arr = matrix.slice(4, 6);
+    }
+
+    return arr[isHorizontal ? 0 : 1] || 0;
+  }
 
   /**
    * Swiper Class
@@ -201,7 +220,7 @@
         }
       }
 
-      var oldTransform = -this.index * this.boxSize;
+      var oldTransform = getTranslate(this.$wrapper, this.isHorizontal);
       this.$wrapper.style.transform = this.getTransform(oldTransform + px);
     };
 
@@ -243,7 +262,7 @@
     _proto.initStatus = function initStatus() {
       this.touchStatus = {
         touchTracks: [],
-        offset: 0,
+        startOffset: 0,
         touchStartTime: 0,
         isTouchStart: false,
         isScrolling: false,
@@ -258,10 +277,14 @@
           supportTouch = this.supportTouch;
 
       var handleTouchStart = function handleTouchStart(e) {
+        _this3.initStatus();
+
         var touchStatus = _this3.touchStatus;
 
         var shouldPreventDefault = _this3.config.touchStartPreventDefault && _this3.formEls.indexOf(e.target.nodeName) === -1 || _this3.config.touchStartForcePreventDefault;
 
+        touchStatus.startOffset = getTranslate(_this3.$wrapper, _this3.isHorizontal);
+        _this3.$wrapper.style.transform = _this3.getTransform(touchStatus.startOffset);
         _this3.$wrapper.style.transition = 'none';
         touchStatus.isTouchStart = true;
         touchStatus.touchStartTime = Date.now();
@@ -287,32 +310,33 @@
         };
         touchStatus.touchTracks.push(currentPosition);
         var touchAngle = Math.atan2(Math.abs(diff.y), Math.abs(diff.x)) * 180 / Math.PI;
+        var offset = 0;
 
         if (_this3.isHorizontal) {
           if (touchAngle < config.touchAngle || touchStatus.isTouching) {
             touchStatus.isTouching = true;
-            touchStatus.offset += diff.x;
+            offset = diff.x;
             e.preventDefault();
           } else {
             touchStatus.isScrolling = true;
           }
         } else {
           if (90 - touchAngle < config.touchAngle || touchStatus.isTouching) {
             touchStatus.isTouching = true;
-            touchStatus.offset += diff.y;
+            offset = diff.y;
             e.preventDefault();
           } else {
             touchStatus.isScrolling = true;
           }
         }
 
-        _this3.scrollPixel(touchStatus.offset * config.touchRatio);
+        _this3.scrollPixel(offset * config.touchRatio);
       };
 
       var handleTouchEnd = function handleTouchEnd() {
         var touchStatus = _this3.touchStatus;
         var swipTime = Date.now() - touchStatus.touchStartTime;
-        var computedOffset = touchStatus.offset * _this3.config.touchRatio;
+        var computedOffset = getTranslate(_this3.$wrapper, _this3.isHorizontal) - touchStatus.startOffset;
         _this3.$wrapper.style.transition = "transform ease " + config.speed + "ms"; // long swip
 
         if (swipTime > _this3.config.longSwipesMs) {