added scoll container option

README.md

@@ -129,7 +129,12 @@ It would be helpful if scroll were passed to the window object, when max scroll
   ...content
 </div>
 ```
-
+when the scroll is passed not to the window, but to another scroll context, you can specify the element to pass the scrolling to.
+```html
+<div v-dragscroll.pass="{container: '.my-scroll-container'}">
+  ...content
+</div>
+```
 
 If you want to apply dragscroll to a child dom element you have no control over (because generated by vuejs). You can use `v-dragscroll="{ target: 'element' }"` to tell to which child the directive will be applied.
 ```html

index.html

@@ -55,6 +55,15 @@
       cursor : -o-grabbing;
       cursor : grabbing;
     }
+
+    .scroller-container {
+      height: 300px;
+      overflow: auto;
+    }
+
+    .scroller {
+      height: 600px;
+    }
   </style>
 </head>
 
@@ -408,6 +417,36 @@ <h4 class="text-uppercase">Usage</h4>
       </div>
 
       <hr>
+
+      <div class="row scroller-container">
+          <div class="col-12 col-sm-6 mt-3">
+            <p><strong>Pass scroll to a container when max reached</strong></p>
+            <div>
+  <pre class="prettyprint lang-html">
+  <code>
+    &lt;div class="scroller-container" style="overflow: auto; height: 300px"&gt;
+      &lt;div class="scroller" style="height: 600px"&gt;
+        &lt;div v-dragscroll.pass="{container: '.scroller-container'}&gt; 
+          &lt;div class="subContainer"&gt;...&lt;div&gt; 
+        &lt;div&gt;
+      &lt;div&gt;
+    &lt;div&gt;
+  </code>
+  </pre>
+          <i>It would be helpful if scroll were passed to the encapsulating scrolling context, when max scroll position were reached.</i>
+            </div>
+          </div>
+
+          <div class="col-12 col-sm-6 mt-3 d-flex justify-content-center scroller bg-secondary">
+            <div class="big-box grab-bing border border-danger bg-secondary" v-dragscroll.pass="{container: '.scroller-container'}"
+              v-on:dragscrollstart="eventTrigged('dragscrollstart')" v-on:dragscrollend="eventTrigged('dragscrollend')"
+              v-on:dragscrollmove="eventTrigged('dragscrollmove', $event)">
+              <img src="./assets/image.jpg" alt="">
+            </div>
+          </div>
+        </div>
+
+        <hr>
 
       <div class="row">
         <div class="col-12 col-sm-6 mt-3">

src/directive.js

@@ -8,6 +8,7 @@ let init = function (el, binding, vnode) {
   // Default parameters
   let target = el // the element to apply the dragscroll on
   let active = true // enable/disable dragscroll
+  let container = window
 
   // config type: boolean
   // Example: v-dragscroll="true" or v-dragscroll="false"
@@ -26,6 +27,15 @@ let init = function (el, binding, vnode) {
     } else if (typeof binding.value.target !== 'undefined') {
       console.error('The parameter "target" should be be either \'undefined\' or \'string\'.')
     }
+    // parameter: container
+    if (typeof binding.value.container === 'string') {
+      container = document.querySelector(binding.value.container)
+      if (!container) {
+        console.error('There is no element with the current container value.')
+      }
+    } else if (typeof binding.value.container !== 'undefined') {
+      console.error('The parameter "container" should be be either \'undefined\' or \'string\'.')
+    }
 
     // parameter: active
     if (typeof binding.value.active === 'boolean') {
@@ -37,6 +47,16 @@ let init = function (el, binding, vnode) {
     // Throw an error if invalid parameters
     console.error('The passed value should be either \'undefined\', \'true\' or \'false\' or \'object\'.')
   }
+
+  var scrollBy = function (x, y) {
+    if (container === window) {
+      window.scrollBy(x, y)
+    } else {
+      container.scrollLeft += x
+      container.scrollTop += y
+    }
+  }
+
   var reset = function () {
     let lastClientX, lastClientY, pushed
     let isDragging = false
@@ -130,12 +150,12 @@ let init = function (el, binding, vnode) {
             target.scrollTop -= binding.modifiers.x ? -0 : newScrollY
           }
 
-          // if one side reach the end scroll window
+          // if one side reach the end scroll container
           if (isEndX || binding.modifiers.y) {
-            window.scrollBy(-newScrollX, 0)
+            scrollBy(-newScrollX, 0)
           }
           if (isEndY || binding.modifiers.x) {
-            window.scrollBy(0, -newScrollY)
+            scrollBy(0, -newScrollY)
           }
         } else {
           // disable one scroll direction in case x or y is specified
@@ -204,7 +224,7 @@ let init = function (el, binding, vnode) {
 }
 
 export default {
-  bind: function (el, binding, vnode) {
+  inserted: function (el, binding, vnode) {
     init(el, binding, vnode)
   },
   update: function (el, binding, vnode, oldVnode) {