Skip to content

Commit 0b5d60e

Browse files
committed
feat: add support for offset
1 parent 4f4823f commit 0b5d60e

File tree

2 files changed

+23
-0
lines changed

2 files changed

+23
-0
lines changed

README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,24 @@ Default: `true`
7474

7575
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.
7676

77+
#### offset
78+
79+
Type: `Number` `object`<br>
80+
Default: `0`
81+
82+
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 break any edge of the viewport by at least `100` pixels. offset can be a positive or negative integer.
83+
84+
Offset can also be set per-direction by passing an object.
85+
86+
```js
87+
{
88+
top: 100,
89+
right: 75,
90+
bottom: 50,
91+
left: 25
92+
}
93+
```
94+
7795
#### threshold
7896

7997
Type: `number`<br>

src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ const MugenScroll = {
1414
type: Boolean,
1515
default: true
1616
},
17+
offset: {
18+
type: [Number, Object],
19+
default: 0
20+
},
1721
threshold: {
1822
type: Number,
1923
default: 0
@@ -33,6 +37,7 @@ const MugenScroll = {
3337
checkInView() {
3438
const execute = () => {
3539
const inView = inViewport(this.$refs.scroll, {
40+
offset: this.offset,
3641
threshold: this.threshold
3742
})
3843
if (this.shouldHandle && inView) {

0 commit comments

Comments
 (0)