From 21856a923d84674a0d4d4bab734de24e18f046b9 Mon Sep 17 00:00:00 2001
From: chatoo2412 <chatoo2412@gmail.com>
Date: Wed, 25 Jul 2018 03:08:56 +0900
Subject: [PATCH] feat: add support for `offset`

---
 README.md    | 18 ++++++++++++++++++
 src/index.js |  5 +++++
 2 files changed, 23 insertions(+)

diff --git a/README.md b/README.md
index 1ef81f7..75ce947 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,24 @@ Default: `true`
 
 Add an addtional condition to check if it should invoke the handler function, for example you don't want it to be invoked again as it's loading.
 
+#### offset
+
+Type: `Number` `object`<br>
+Default: `0`
+
+By default, the `<mugen-scroll>`' is considered in viewport if it breaks any edge of the viewport. This can be used to set an offset from that edge. For example, an offset of `100` will consider the element in viewport if it breaks any edge of the viewport by at least `100` pixels. offset can be a positive or negative integer.
+
+Offset can also be set per-direction by passing an object.
+
+```js
+{
+  top: 100,
+  right: 75,
+  bottom: 50,
+  left: 25
+}
+```
+
 #### threshold
 
 Type: `number`<br>
diff --git a/src/index.js b/src/index.js
index d282072..c6f2ba9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,6 +14,10 @@ const MugenScroll = {
       type: Boolean,
       default: true
     },
+    offset: {
+      type: [Number, Object],
+      default: 0
+    },
     threshold: {
       type: Number,
       default: 0
@@ -33,6 +37,7 @@ const MugenScroll = {
     checkInView() {
       const execute = () => {
         const inView = inViewport(this.$refs.scroll, {
+          offset: this.offset,
           threshold: this.threshold
         })
         if (this.shouldHandle && inView) {