Merge pull request #22 from mostlyserious/feat/option-for-scroll-container

Add option for scroll container

Author: jsnanigans

README.md

@@ -37,6 +37,7 @@ const options = {
   minWidth: Number,   /* minumum window width for parallax to take effect */
   className: String,  /* this class gets added to all elements
                       that are being animated, by default none */
+  container: String,  /* element that actually scrolls, by default it's window */
 }
 ```
 

lib/vue-parallax-js.cjs.js

@@ -9,6 +9,12 @@ if (typeof document === 'undefined') {
 
 const ParallaxJS = function (os) {
   this.os = os
+
+  this.container = null
+
+  this._bindContainer = () => {
+    this.container = document.querySelector(this.os.container)
+  }
 }
 
 ParallaxJS.prototype = {
@@ -84,11 +90,11 @@ ParallaxJS.prototype = {
       this.items.forEach((item) => {
         item.el.style[this.tProp] = ``
       })
-
+ 
       return
     }
 
-    const sT = window.scrollY || window.pageYOffset
+    const sT = this.container ? this.container.scrollTop : window.scrollY || window.pageYOffset
     const wH = window.innerHeight
 
     this.items.forEach((item) => {
@@ -110,9 +116,24 @@ export default {
     if (!window) return
     const p = new ParallaxJS(os)
 
-    window.addEventListener('scroll', () => {
-      p.move(p)
-    }, { passive: true })
+    if (os.container) {
+      Vue.mixin({
+        mounted() {
+          if(this.$parent) return
+
+          p._bindContainer()
+
+          p.container.addEventListener('scroll', () => {
+            p.move(p)
+          }, { passive: true })
+        }
+      })
+    } else {
+      window.addEventListener('scroll', () => {
+        p.move(p)
+      }, { passive: true })
+    }
+
     window.addEventListener('resize', () => {
       p.update()
       p.move(p)