init

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+*.md
+node_modules

.eslintrc

@@ -0,0 +1,20 @@
+{
+    "extends": "eslint-config-airbnb-base",
+    "parserOptions": {
+        "ecmaVersion": 2017,
+        "sourceType": 'module'
+    },
+    "env": {
+        "browser": true,
+        "mocha": true
+    },
+    "rules": {
+        "comma-dangle": 0,
+        "indent": ["error", 4],
+        "no-shadow": 0,
+        "no-underscore-dangle": 0,
+        "spaced-comment": 0,
+        "one-var": 0,
+        "operator-linebreak": 0
+    }
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+package-lock.json
+lib

.travis.yml

@@ -0,0 +1,21 @@
+sudo: required
+dist: trusty
+group: edge
+
+language: node_js
+
+os:
+  - linux
+
+node_js:
+  - '6'
+  - '8'
+  - '10'
+
+branches:
+  only:
+  - master
+
+before_install:
+  - npm install -g npm
+  - npm --version

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,70 @@
+# autoscroll
+
+A utility for auto-scroll when trigger location of event (i.e. mouse event) almost reach boundary.
+
+[![NPM](https://nodei.co/npm/autoscroll.png?downloads=true&stars=true)](https://www.npmjs.com/package/autoscroll/)
+
+## Installation
+
+1. Install the latest version of [autoscroll](https://github.com/seawind543/autoScroll):
+
+```
+  npm install --save autoscroll
+  ```
+
+2. At this point you can import `autoscroll`:
+
+```javascript
+import autoScroll from 'autoscroll';
+```
+## Example
+
+```javascript
+import React, { PureComponent } from 'react';
+import autoScroll from 'autoscroll';
+
+class Example extends PureComponent {
+    refContent = (content) => {
+        this.content = content;
+    }
+
+    actions = {
+        onMouseMove: (e) => {
+            // Start auto scrolling
+            autoScroll.run(e, this.content);
+        },
+        onMouseOut: (e) => {
+            // Stop auto scrolling if any
+            autoScroll.end();
+        }
+    };
+
+    render() {
+        return (
+            <div
+                style={{
+                    height: 500,
+                    overflow: 'auto'
+                }}
+                ref={this.refContent}
+                onMouseMove={this.actions.onMouseMove}
+                onMouseOut={this.actions.onMouseOut}
+            >
+                <div
+                    style={{
+                        height: 1000,
+                        backgroundColor: 'yellow'
+                    }}
+                />
+            </div>
+        );
+    }
+}
+
+export default Example;
+
+```
+
+## License
+
+[MIT](https://github.com/seawind543/autoScroll/blob/master/LICENSE)

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "autoscroll",
+  "version": "0.1.0",
+  "description": "A utility for auto-scroll when almost reach boundary",
+  "keywords": [
+    "auto-scroll",
+    "scroll"
+  ],
+  "author": "Mark Lin <[email protected]>",
+  "license": "MIT",
+  "main": "lib/autoScroll.js",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:seawind543/autoScroll.git"
+  },
+  "bugs": {
+    "url": "https://github.com/seawind543/autoScroll/issues"
+  },
+  "homepage": "https://github.com/seawind543/autoScroll",
+  "scripts": {
+    "build": "babel src --out-dir lib",
+    "clean": "rm -f {lib}/*",
+    "prepublish": "npm run lint && npm run clean && npm run build",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src"
+  },
+  "dependencies": {
+    "lodash": "4.17.10"
+  },
+  "devDependencies": {
+    "babel-cli": "6.26.0",
+    "babel-eslint": "8.2.3",
+    "babel-polyfill": "6.26.0",
+    "babel-preset-es2015": "6.24.1",
+    "babel-register": "6.26.0",
+    "eslint": "4.19.1",
+    "eslint-plugin-import": "2.12.0",
+    "eslint-config-airbnb-base": "13.0.0"
+  }
+}

src/autoScroll.js

@@ -0,0 +1,128 @@
+import _throttle from 'lodash/throttle';
+
+const setup = () => {
+    const autoScrollCtrl = {};
+
+    const stopAutoScrolling = () => {
+        const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+        cancelAnimationFrame(autoScrollCtrl.pid);
+    };
+
+    const _autoScroll = (/**Event*/evt, /**Object*/options, /**HTMLElement*/rootEl) => {
+        let scrollParentEl;
+        let scrollEl;
+
+        // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
+        if (rootEl && options.scroll) {
+            let el;
+            let rect;
+            const sens = options.scrollSensitivity;
+            const speed = options.scrollSpeed;
+            const x = evt.clientX;
+            const y = evt.clientY;
+            const winWidth = window.innerWidth;
+            const winHeight = window.innerHeight;
+            let vx,
+                vy,
+                scrollOffsetX,
+                scrollOffsetY;
+
+            // Delect scrollEl
+            if (scrollParentEl !== rootEl) {
+                scrollEl = options.scroll;
+                scrollParentEl = rootEl;
+
+                if (scrollEl === true) {
+                    scrollEl = rootEl;
+
+                    do {
+                        if (scrollEl.offsetWidth < scrollEl.scrollWidth) {
+                            break;
+                        }
+
+                        if (scrollEl.offsetHeight < scrollEl.scrollHeight) {
+                            break;
+                        }
+
+                        if (!scrollEl.parentNode) {
+                            break;
+                        }
+
+                        scrollEl = scrollEl.parentNode;
+                    } while (true);
+                }
+            }
+
+            if (scrollEl) {
+                el = scrollEl;
+                rect = scrollEl.getBoundingClientRect();
+                vx = (Math.abs(rect.right - x) <= sens) - (Math.abs(rect.left - x) <= sens);
+                vy = (Math.abs(rect.bottom - y) <= sens) - (Math.abs(rect.top - y) <= sens);
+            }
+
+            if (!(vx || vy)) {
+                vx = (winWidth - x <= sens) - (x <= sens);
+                vy = (winHeight - y <= sens) - (y <= sens);
+
+                if (vx || vy) {
+                    el = window;
+                }
+            }
+
+            if (autoScrollCtrl.vx !== vx || autoScrollCtrl.vy !== vy || autoScrollCtrl.el !== el) {
+                autoScrollCtrl.el = el;
+                autoScrollCtrl.vx = vx;
+                autoScrollCtrl.vy = vy;
+
+                stopAutoScrolling(); // Stop any exist autoScrolling
+                if (el) {
+                    const requestAnimationFrame =
+                        window.requestAnimationFrame ||
+                        window.mozRequestAnimationFrame ||
+                        window.webkitRequestAnimationFrame ||
+                        window.msRequestAnimationFrame;
+                    const scrolling = () => {
+                        scrollOffsetY = vy ? vy * speed : 0;
+                        scrollOffsetX = vx ? vx * speed : 0;
+
+                        if (el === window) {
+                            window.scrollTo(
+                                window.pageXOffset + scrollOffsetX,
+                                window.pageYOffset + scrollOffsetY
+                            );
+                        } else {
+                            el.scrollTop += scrollOffsetY;
+                            el.scrollLeft += scrollOffsetX;
+                        }
+
+                        autoScrollCtrl.pid = requestAnimationFrame(scrolling);
+                    };
+                    autoScrollCtrl.pid = requestAnimationFrame(scrolling);
+                }
+            }
+        }
+    };
+
+    const throttleAutoScroll = _throttle(_autoScroll, 30);
+    const run = (/**Event*/ evt, /**HTMLElement*/ rootEl, /**Object*/ options = {}) => {
+        const {
+            scroll = true,
+            scrollSensitivity = 30,
+            scrollSpeed = 10
+        } = options;
+        const newOptions = {
+            scroll,
+            scrollSensitivity,
+            scrollSpeed
+        };
+
+        throttleAutoScroll(evt, newOptions, rootEl);
+    };
+
+    return {
+        run,
+        end: stopAutoScrolling
+    };
+};
+
+export default setup();