Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 18b2b17

Browse files
Merge branch 'master' into patch-2
2 parents 3a80b4b + b563b7f commit 18b2b17

File tree

5 files changed

+48
-10
lines changed

5 files changed

+48
-10
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const options = {
3737
minWidth: Number, /* minumum window width for parallax to take effect */
3838
className: String, /* this class gets added to all elements
3939
that are being animated, by default none */
40+
container: String, /* element that actually scrolls, by default it's window */
4041
}
4142
```
4243

‎lib/vue-parallax-js.cjs.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/vue-parallax-js.es.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/vue-parallax-js.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/vue-parallax-js.js

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ if (typeof document === 'undefined') {
99

1010
const ParallaxJS = function (os) {
1111
this.os = os
12+
13+
this.container = null
14+
15+
this._bindContainer = () => {
16+
this.container = document.querySelector(this.os.container)
17+
}
1218
}
1319

1420
ParallaxJS.prototype = {
@@ -29,6 +35,14 @@ ParallaxJS.prototype = {
2935
return 'transform'
3036
})(),
3137

38+
remove(el, binding) {
39+
for(let item of this.items){
40+
if(item.el === el){
41+
this.items.splice(this.items.indexOf(el), 1)
42+
}
43+
}
44+
},
45+
3246
add (el, binding) {
3347
if (!window) return
3448
const value = binding.value
@@ -61,8 +75,12 @@ ParallaxJS.prototype = {
6175
this.items.forEach(function (item) {
6276
const t = item.el
6377
const n = t.currentStyle || window.getComputedStyle(t)
78+
6479
item.height = item.mod.absY ? window.innerHeight : t.clientHeight || t.scrollHeight
65-
item.iOT = t.offsetTop + t.offsetParent.offsetTop - parseInt(n.marginTop)
80+
if(t.offsetParent !== null)
81+
item.iOT = t.offsetTop + t.offsetParent.offsetTop - parseInt(n.marginTop)
82+
83+
6684
})
6785
},
6886
move () {
@@ -72,11 +90,11 @@ ParallaxJS.prototype = {
7290
this.items.forEach((item) => {
7391
item.el.style[this.tProp] = ``
7492
})
75-
93+
7694
return
7795
}
7896

79-
const sT = window.scrollY || window.pageYOffset
97+
const sT = this.container ? this.container.scrollTop : window.scrollY || window.pageYOffset
8098
const wH = window.innerHeight
8199

82100
this.items.forEach((item) => {
@@ -98,10 +116,26 @@ export default {
98116
if (!window) return
99117
const p = new ParallaxJS(os)
100118

101-
window.addEventListener('scroll', () => {
102-
p.update()
103-
p.move(p)
104-
}, { passive: true })
119+
if (os.container) {
120+
Vue.mixin({
121+
mounted() {
122+
if(this.$parent) return
123+
124+
p._bindContainer()
125+
126+
p.container.addEventListener('scroll', () => {
127+
p.update()
128+
p.move(p)
129+
}, { passive: true })
130+
}
131+
})
132+
} else {
133+
window.addEventListener('scroll', () => {
134+
p.update()
135+
p.move(p)
136+
}, { passive: true })
137+
}
138+
105139
window.addEventListener('resize', () => {
106140
p.update()
107141
p.move(p)
@@ -115,6 +149,9 @@ export default {
115149
inserted (el, binding) {
116150
p.add(el, binding)
117151
p.move(p)
152+
},
153+
unbind(el, binding){
154+
p.remove(el, binding)
118155
}
119156
})
120157
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /