support scroll any element container

laskydev · Jan 6, 2019 · 4ca5d22 · 4ca5d22
1 parent 0c6dcd5
commit 4ca5d22
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -61,7 +61,8 @@ The default options are as follows:
 new MoveTo({
   tolerance: 0,
   duration: 800,
-  easing: 'easeOutQuart'
+  easing: 'easeOutQuart',
+  container: window
 })
 ```
 
@@ -70,6 +71,7 @@ new MoveTo({
 | tolerance | 0            | The tolerance of the target to be scrolled, can be negative or positive              |
 | duration  | 800          | Duration of scrolling, in milliseconds                                               |
 | easing    | easeOutQuart | Ease function name                                                                   |
+| container | window       | The container been computed and scrolled
 | callback  | noop         | The function to be run after scrolling complete. Target passes as the first argument |
 
 ## API

diff --git a/demo/move-container.html b/demo/move-container.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <script src="../dist/moveTo.js"></script>
+    <title>Title</title>
+</head>
+<body>
+    <div id="container">
+        <div id="content">
+            1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+            2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+            3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+
+            <div id="target">target</div>
+
+            4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+            5<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+        </div>
+    </div>
+
+    <style>
+        #container {
+            width: 300px;
+            border: 1px solid #000;
+            height: 700px;
+            overflow: scroll;
+        }
+        #content {
+            width: 100%;
+            background-color: #ff6600;
+            font-size: 50px;
+        }
+    </style>
+
+    <script>
+        window.onload = function () {
+            new MoveTo({
+                tolerance: 0,
+                duration: 800,
+                easing: 'easeOutQuart',
+                container: document.getElementById('container'),
+            }).move(document.getElementById('target'));
+        }
+    </script>
+</body>
+</html>
diff --git a/dist/moveTo.js b/dist/moveTo.js
@@ -1,8 +1,8 @@
 /*!
  * MoveTo - A lightweight scroll animation javascript library without any dependency.
- * Version 1.7.4 (28-09-2018 16:02)
+ * Version 1.7.4 (06-01-2019 19:51)
  * Licensed under MIT
- * Copyright 2018 Hasan Aydoğdu <[email protected]>
+ * Copyright 2019 Hasan Aydoğdu <[email protected]>
  */
 
 'use strict';
@@ -15,17 +15,18 @@ var MoveTo = function () {
     tolerance: 0,
     duration: 800,
     easing: 'easeOutQuart',
-    callback: function callback() {} };
+    callback: function callback() {},
+    container: window };
 
 
   /**
-                                         * easeOutQuart Easing Function
-                                         * @param  {number} t - current time
-                                         * @param  {number} b - start value
-                                         * @param  {number} c - change in value
-                                         * @param  {number} d - duration
-                                         * @return {number} - calculated value
-                                         */
+                          * easeOutQuart Easing Function
+                          * @param  {number} t - current time
+                          * @param  {number} b - start value
+                          * @param  {number} c - change in value
+                          * @param  {number} d - duration
+                          * @return {number} - calculated value
+                          */
   function easeOutQuart(t, b, c, d) {
     t /= d;
     t--;
@@ -62,6 +63,18 @@ var MoveTo = function () {
     });
   };
 
+  /**
+      * Count a number of item scrolled top
+      * @param  {Window|HTMLElement} container
+      * @return {number}
+      */
+  function countScrollTop(container) {
+    if (container instanceof HTMLElement) {
+      return container.scrollTop;
+    }
+    return container.pageYOffset;
+  };
+
   /**
       * MoveTo Constructor
       * @param {object} options Options
@@ -118,14 +131,14 @@ var MoveTo = function () {
     options = mergeObject(this.options, options);
 
     var distance = typeof target === 'number' ? target : target.getBoundingClientRect().top;
-    var from = window.pageYOffset;
+    var from = countScrollTop(options.container);
     var startTime = null;
     var lastPageYOffset = void 0;
     distance -= options.tolerance;
 
     // rAF loop
     var loop = function loop(currentTime) {
-      var currentPageYOffset = window.pageYOffset;
+      var currentPageYOffset = countScrollTop(_this2.options.container);
 
       if (!startTime) {
         // To starts time from 1, we subtracted 1 from current time
@@ -150,12 +163,12 @@ var MoveTo = function () {
       timeElapsed, from, distance, options.duration);
 
 
-      window.scroll(0, val);
+      options.container.scroll(0, val);
 
       if (timeElapsed < options.duration) {
         window.requestAnimationFrame(loop);
       } else {
-        window.scroll(0, distance + from);
+        options.container.scroll(0, distance + from);
         options.callback(target);
       }
     };

diff --git a/dist/moveTo.min.js b/dist/moveTo.min.js
diff --git a/src/moveTo.js b/src/moveTo.js
@@ -9,6 +9,7 @@ const MoveTo = (() => {
     duration: 800,
     easing: 'easeOutQuart',
     callback: function() {},
+    container: window,
   };
 
   /**
@@ -55,6 +56,18 @@ const MoveTo = (() => {
     });
   };
 
+  /**
+   * Count a number of item scrolled top
+   * @param  {Window|HTMLElement} container
+   * @return {number}
+   */
+  function countScrollTop(container) {
+    if (container instanceof HTMLElement){
+      return container.scrollTop;
+    }
+    return container.pageYOffset;
+  };
+
   /**
    * MoveTo Constructor
    * @param {object} options Options
@@ -111,14 +124,14 @@ const MoveTo = (() => {
     options = mergeObject(this.options, options);
 
     let distance = typeof target === 'number' ? target : target.getBoundingClientRect().top;
-    const from = window.pageYOffset;
+    const from = countScrollTop(options.container);
     let startTime = null;
     let lastPageYOffset;
     distance -= options.tolerance;
 
     // rAF loop
     const loop = (currentTime) => {
-      let currentPageYOffset = window.pageYOffset;
+      let currentPageYOffset = countScrollTop(this.options.container);
 
       if (!startTime) {
         // To starts time from 1, we subtracted 1 from current time
@@ -143,12 +156,12 @@ const MoveTo = (() => {
         timeElapsed, from, distance, options.duration
       );
 
-      window.scroll(0, val);
+      options.container.scroll(0, val);
 
       if (timeElapsed < options.duration) {
         window.requestAnimationFrame(loop);
       } else {
-        window.scroll(0, distance + from);
+        options.container.scroll(0, distance + from);
         options.callback(target);
       }
     };