Develop

README.md

@@ -71,12 +71,19 @@ With :
 
 `containerClass` must be used to override the `.progress-bar-container--container` default class. You can use the default `:class` syntax on the component to add classes if needed.
 
+## Methods
+
+| key     | description             | type   |function property|
+|:--------|-------------------------|--------|-----------------|
+|`onClick`|When clicked on scrollbar|Function| event object    |
+
 ## Events
 
-|key|description|
-|:---|---|
-| `begin`|When scroll reached 0%|
-|`complete`|When scroll reached 100%|
+| key      | event condition     | return value            |
+|:---------|---------------------|-------------------------|
+| `begin`  | Scroll reached 0%   | –                       |
+|`complete`| Scroll reached 100% | –                       |
+|`update`  | Every scroll event  | Scroll position (0-100) |
 
 ## Develop
 

src/components/VueScrollProgressBar.vue

@@ -5,6 +5,7 @@
       background: containerColor,
       zIndex: zIndex
     }"
+    @click="onClick($event)"
   >
     <div
       :class="barClass"
@@ -54,6 +55,11 @@ export default {
           'progress-bar-container--container': true
         }
       }
+    },
+
+    onClick: {
+      type: Function,
+      default: () => {}
     }
   },
 
@@ -69,6 +75,10 @@ export default {
       this.width = (window.scrollY / height) * 100
       const eventWidth = Math.ceil(this.width)
 
+      if (this.emitUpdate) {
+        this.$emit("update", eventWidth)
+      }
+
       if (eventWidth === 0) {
         this.$emit("begin")
       }
@@ -79,12 +89,20 @@ export default {
     }
   },
 
+  computed: {
+    emitUpdate () {
+      return Object.keys(this.$listeners).includes('update')
+    }
+  },
+
   mounted() {
+    window.addEventListener("resize", this.handleScroll)
     window.addEventListener("scroll", this.handleScroll)
     window.dispatchEvent(new Event("scroll"))
   },
 
   destroyed() {
+    window.addEventListener("resize", this.handleScroll)
     window.removeEventListener("scroll", this.handleScroll)
   }
 }