From 51f9c57c907d654b4035a01d870efd2b043d5ec0 Mon Sep 17 00:00:00 2001 From: Daniel Abrao Date: Tue, 9 Oct 2018 09:03:27 -0300 Subject: [PATCH 1/3] Bump package.json version --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2b8fa88..5053c7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-parallaxy", - "version": "1.1.1", + "version": "1.1.2", "description": "Vue 2 component for parallax scrolling effects", "author": "Jakub Juszczak ", "license": "MIT", @@ -99,5 +99,8 @@ "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" + }, + "dependencies": { + "yarn": "^1.10.1" } } From 6f439f106720b3a0a538e0c577cf9c39755b5593 Mon Sep 17 00:00:00 2001 From: Daniel Abrao Date: Tue, 9 Oct 2018 09:04:36 -0300 Subject: [PATCH 2/3] Add customWrapperReference prop allowing custom scroll containers to listen events --- src/components/Parallax.vue | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/Parallax.vue b/src/components/Parallax.vue index 2a78154..9864f18 100644 --- a/src/components/Parallax.vue +++ b/src/components/Parallax.vue @@ -52,13 +52,19 @@ direction: { type: String, default: 'up' + }, + customWrapperReference: { + type: String, + default: '', + required: false } }, data () { return { el: null, - mediaQuery: null + mediaQuery: null, + scrollWrapper: null } }, @@ -81,7 +87,13 @@ const parentHeight = this.$refs.block.offsetHeight const parallaxHeight = this.$refs.parallax.offsetHeight const availableOffset = parallaxHeight - parentHeight - let animationValue = (window.pageYOffset * this.speedFactor) + let animationValue + + if (this.customWrapperReference) { + animationValue = (this.scrollWrapper.scrollTop * this.speedFactor) + } else { + animationValue = (this.scrollWrapper.pageYOffset * this.speedFactor) + } if (animationValue <= availableOffset && animationValue >= 0) { this.el.style.transform = `translate3d(0, ${animationValue * this.directionValue}px ,0)` @@ -101,21 +113,27 @@ return ( rect.bottom >= 0 && - rect.top <= (window.innerHeight || document.documentElement.clientHeight) + rect.top <= (this.scrollWrapper.innerHeight || document.documentElement.clientHeight) ) }, setupListener () { if (this.mediaQuery.matches) { - window.addEventListener('scroll', this.scrollHandler, false) + this.scrollWrapper.addEventListener('scroll', this.scrollHandler, false) } else { - window.removeEventListener('scroll', this.scrollHandler, false) + this.scrollWrapper.removeEventListener('scroll', this.scrollHandler, false) } }, init () { this.mediaQuery = window.matchMedia(this.breakpoint) + if (this.customWrapperReference) { + this.scrollWrapper = document.querySelector(this.customWrapperReference) + } else { + this.scrollWrapper = window + } + if (this.mediaQuery) { this.mediaQuery.addListener(this.setupListener) this.setupListener() @@ -124,7 +142,7 @@ }, beforeDestroy () { - window.removeEventListener('scroll', this.scrollHandler, false) + this.scrollWrapper.removeEventListener('scroll', this.scrollHandler, false) }, computed: { From 7f856c6594c2ef4d2999c5ed19cca62296c91d4f Mon Sep 17 00:00:00 2001 From: Daniel Abrao Date: Tue, 9 Oct 2018 14:58:56 -0300 Subject: [PATCH 3/3] Remove yarn dep and rollback the project version --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index 5053c7e..2b8fa88 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-parallaxy", - "version": "1.1.2", + "version": "1.1.1", "description": "Vue 2 component for parallax scrolling effects", "author": "Jakub Juszczak ", "license": "MIT", @@ -99,8 +99,5 @@ "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" - }, - "dependencies": { - "yarn": "^1.10.1" } }