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 b563b7f

Browse files
Merge pull request #22 from mostlyserious/feat/option-for-scroll-container
Add option for scroll container
2 parents 6945f19 + a4bfa08 commit b563b7f

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 = {
@@ -84,11 +90,11 @@ ParallaxJS.prototype = {
8490
this.items.forEach((item) => {
8591
item.el.style[this.tProp] = ``
8692
})
87-
93+
8894
return
8995
}
9096

91-
const sT = window.scrollY || window.pageYOffset
97+
const sT = this.container ? this.container.scrollTop : window.scrollY || window.pageYOffset
9298
const wH = window.innerHeight
9399

94100
this.items.forEach((item) => {
@@ -110,9 +116,24 @@ export default {
110116
if (!window) return
111117
const p = new ParallaxJS(os)
112118

113-
window.addEventListener('scroll', () => {
114-
p.move(p)
115-
}, { 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.move(p)
128+
}, { passive: true })
129+
}
130+
})
131+
} else {
132+
window.addEventListener('scroll', () => {
133+
p.move(p)
134+
}, { passive: true })
135+
}
136+
116137
window.addEventListener('resize', () => {
117138
p.update()
118139
p.move(p)

0 commit comments

Comments
(0)

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