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 a4bfa08

Browse files
author
Levi Zitting
committed
Add option for scroll container
1 parent 3bd2ed5 commit a4bfa08

File tree

5 files changed

+30
-8
lines changed

5 files changed

+30
-8
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: 26 additions & 5 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 = {
@@ -72,11 +78,11 @@ ParallaxJS.prototype = {
7278
this.items.forEach((item) => {
7379
item.el.style[this.tProp] = ``
7480
})
75-
81+
7682
return
7783
}
7884

79-
const sT = window.scrollY || window.pageYOffset
85+
const sT = this.container ? this.container.scrollTop : window.scrollY || window.pageYOffset
8086
const wH = window.innerHeight
8187

8288
this.items.forEach((item) => {
@@ -98,9 +104,24 @@ export default {
98104
if (!window) return
99105
const p = new ParallaxJS(os)
100106

101-
window.addEventListener('scroll', () => {
102-
p.move(p)
103-
}, { passive: true })
107+
if (os.container) {
108+
Vue.mixin({
109+
mounted() {
110+
if(this.$parent) return
111+
112+
p._bindContainer()
113+
114+
p.container.addEventListener('scroll', () => {
115+
p.move(p)
116+
}, { passive: true })
117+
}
118+
})
119+
} else {
120+
window.addEventListener('scroll', () => {
121+
p.move(p)
122+
}, { passive: true })
123+
}
124+
104125
window.addEventListener('resize', () => {
105126
p.update()
106127
p.move(p)

0 commit comments

Comments
(0)

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