Added smoothscroll-polyfill (#7)

README.md

@@ -1,5 +1,5 @@
 # vue-horizontal-list
-A pure vue horizontal list implementation with 0 dependencies, ssr support, mobile friendly, touch friendly and responsive. 
+A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive. 
 I created this because I like how AirBnb does their horizontal list, I couldn't find a library that is simple and close to it.
 
 Check it out: [vue-horizontal-list demo](https://nuxt-app.now.sh/vue-horizontal-list).
@@ -15,7 +15,7 @@ yarn add vue-horizontal-list
 ```
 
 ## Features
-* Lightweight implementation with 0 dependencies.
+* Lightweight implementation with 1 dependencies.
 * SSR supported
 * Mobile touch screen friendly
 * Invisible scroll bar for consistent Windows and MacOS browsing experience.
@@ -27,6 +27,7 @@ yarn add vue-horizontal-list
 * Navigation control will show up dynamically for larger screen
 * Touch screen friendly
 * Minimal config setup
+* Tested on chrome, edge and safari
 
 ## Options
 ```js

package.json

@@ -27,7 +27,9 @@
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
   },
-  "dependencies": {},
+  "dependencies": {
+    "smoothscroll-polyfill": "^0.4.4"
+  },
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.7.7",

src/vue-horizontal-list.vue

@@ -30,6 +30,10 @@
 </template>
 
 <script>
+  import smoothscroll from 'smoothscroll-polyfill';
+
+  smoothscroll.polyfill();
+
   export default {
     name: "VueHorizontalList",
     props: {
@@ -216,7 +220,9 @@
       go(position) {
         const maxPosition = this.items.length - this._size
         this.position = position > maxPosition ? maxPosition : position
-        this.$refs.list.scrollLeft = this._itemWidth * this.position
+
+        const left = this._itemWidth * this.position + this.position * this._options.item.padding
+        this.$refs.list.scrollTo({top: 0, left: left, behavior: 'smooth'})
       },
 
       /**

yarn.lock

@@ -7093,6 +7093,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+smoothscroll-polyfill@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
+  integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"