From 67d3b4bc8df0b76a1c7994cdeac1c63fd9ecc198 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Wed, 26 Dec 2018 20:16:07 +0100 Subject: [PATCH 01/15] if autoScroll is set to true, on touchMove prevent default and set overflow to hidden, increase timeLapse between touchMoves --- package-lock.json | 33 ++++++++++----------------------- src/Scroller.js | 15 ++++++++++----- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index c85221b..819bcec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-skroll", - "version": "0.7.1", + "version": "0.7.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2428,7 +2428,8 @@ "core-js": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.1.tgz", - "integrity": "sha512-L72mmmEayPJBejKIWe2pYtGis5r0tQ5NaJekdhyXgeMQTpJoBsH0NL4ElY2LfSoV15xeQWKQ+XTTOZdyero5Xg==" + "integrity": "sha512-L72mmmEayPJBejKIWe2pYtGis5r0tQ5NaJekdhyXgeMQTpJoBsH0NL4ElY2LfSoV15xeQWKQ+XTTOZdyero5Xg==", + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3681,15 +3682,13 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3706,22 +3705,19 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3852,8 +3848,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3867,7 +3862,6 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3884,7 +3878,6 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3893,15 +3886,13 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3922,7 +3913,6 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4011,8 +4001,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -4026,7 +4015,6 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4164,7 +4152,6 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/Scroller.js b/src/Scroller.js index def73a4..a380a91 100644 --- a/src/Scroller.js +++ b/src/Scroller.js @@ -160,8 +160,6 @@ export default class Scroller extends Component { scroll: position, onFrame: ({ scroll }) => (this.target.scrollTop = scroll), }) - - console.log(this.target); } scrollToByIndex = (index) => { @@ -334,12 +332,18 @@ export default class Scroller extends Component { } handleTouchMove = (e) => { + const { autoScroll } = this.props + + if (autoScroll) { + e.preventDefault() + } + const { touches, originalPosition } = this.state.scroll let distanceFromTouchStart = e.changedTouches[0].clientY - touches[0].clientY let touchPosition = originalPosition - distanceFromTouchStart - this.scrollToPosition(touchPosition) + // this.scrollToPosition(touchPosition) } handleTouchEnd = (e) => { @@ -347,7 +351,7 @@ export default class Scroller extends Component { const timeLapse = Date.now() - timeStamp - if (timeLapse < 200) { + if (timeLapse < 400) { const movingUpwards = e.changedTouches[0].clientY < touches[0].clientY const movingDownwards = e.changedTouches[0].clientY > touches[0].clientY @@ -417,7 +421,8 @@ class ScrollerContent extends PureComponent { const style = { height: '100%', width: '100%', - overflowY: autoScroll || scroll.touching ? 'hidden' : 'auto', + overflowY: 'hidden', + // overflowY: autoScroll || scroll.touching ? 'hidden' : 'auto', // TODO: investigar glich on touchScroll with overFlow // overflowScrolling: 'touch', // WebkitOverflowScrolling: 'touch', From 4f1cdb6f917405536b6c31ed385777bb92912bb1 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Wed, 26 Dec 2018 20:17:43 +0100 Subject: [PATCH 02/15] fix overflowY condition --- src/Scroller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Scroller.js b/src/Scroller.js index a380a91..140e0a6 100644 --- a/src/Scroller.js +++ b/src/Scroller.js @@ -421,7 +421,7 @@ class ScrollerContent extends PureComponent { const style = { height: '100%', width: '100%', - overflowY: 'hidden', + overflowY: autoScroll ? 'hidden' : 'auto', // overflowY: autoScroll || scroll.touching ? 'hidden' : 'auto', // TODO: investigar glich on touchScroll with overFlow // overflowScrolling: 'touch', From 05034fd08e19c77616b6a1abfab900510fce4971 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Thu, 27 Dec 2018 09:59:25 +0100 Subject: [PATCH 03/15] prepare for publishing --- README.md | 2 ++ package.json | 15 +++++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 695a398..e23f565 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +This is a fork of [react-skroll](https://github.com/du5rte/react-skroll/). + # react-skroll Uses `react-spring` for butter smooth enhanced scrolling experience diff --git a/package.json b/package.json index 62796fe..f594ed5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "react-skroll", + "name": "@arturmiglio/react-skroll", "description": "Reactive Scrolling", - "version": "0.7.2", + "version": "0.7.3", "main": "lib/index.js", "scripts": { "clean": "rm -rf dist lib && mkdir dist lib", @@ -16,14 +16,14 @@ "test": "jest" }, "license": "MIT", - "homepage": "https://github.com/du5rte/react-skroll#readme", + "homepage": "https://github.com/arturmiglio/react-skroll#readme", "repository": { "type": "git", - "url": "git+https://github.com/du5rte/react-skroll.git" + "url": "git+https://github.com/arturmiglio/react-skroll.git" }, - "author": "Duarte Monteiro (http://du5rte.com)", + "author": "Artur Miglio (http://arturmiglio.com)", "bugs": { - "url": "https://github.com/du5rte/react-skroll/issues" + "url": "https://github.com/arturmiglio/react-skroll/issues" }, "keywords": [ "react", @@ -70,5 +70,8 @@ "webpack": "^4.28.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" + }, + "directories": { + "lib": "lib" } } From c97a0d8dd81b9cd08a693a7957b662f879f5bf70 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 28 Dec 2018 12:28:01 +0100 Subject: [PATCH 04/15] scroll using css transforms instead of scrollTop --- demo/Demo.js | 6 ++-- demo/index.css | 1 + package-lock.json | 4 +-- src/Scroller.js | 51 +++++++++++++++++++++----------- src/nodeChildrenToScrollState.js | 7 ++++- src/nodeToScrollState.js | 15 ++++++---- 6 files changed, 56 insertions(+), 28 deletions(-) diff --git a/demo/Demo.js b/demo/Demo.js index d899e42..8ec0cf2 100644 --- a/demo/Demo.js +++ b/demo/Demo.js @@ -61,9 +61,9 @@ export default class Demo extends Component { > { colors.map(({ name, color }, index) => -
+
-

{round(scroll.positionRatio)}

+

{round(this.state.scroll.positionRatio)}

@@ -71,7 +71,7 @@ export default class Demo extends Component {

{'{'}

{ - Object.entries(scroll) + Object.entries(this.state.scroll) .filter(([key, value]) => typeof value !== 'function') .filter(([key, value]) => typeof value !== 'object') .map(([key, value]) => diff --git a/demo/index.css b/demo/index.css index 4d6d5c4..f94eb93 100644 --- a/demo/index.css +++ b/demo/index.css @@ -41,6 +41,7 @@ nav { left: 0; width: 100%; padding: 0.5em; + z-index: 10; } h1 { diff --git a/package-lock.json b/package-lock.json index 819bcec..8e0d3bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "react-skroll", - "version": "0.7.2", + "name": "@arturmiglio/react-skroll", + "version": "0.7.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/Scroller.js b/src/Scroller.js index 140e0a6..fc2d0c0 100644 --- a/src/Scroller.js +++ b/src/Scroller.js @@ -10,6 +10,9 @@ import scrollInitalState from './scrollInitalState' import nodeToScrollState from './nodeToScrollState' import nodeChildrenToScrollState from './nodeChildrenToScrollState' +const START_TRANSLATE_3D = 'translate3d(0px,0px,0px)' +const START_TRANSLATE = 'translate(0px,0px)' + const View = Globals.defaultElement export default class Scroller extends Component { @@ -50,7 +53,7 @@ export default class Scroller extends Component { // add component to resize observer to detect changes on resize this.resizeObserver = new ResizeObserver((entries, observer) => { - if (this.state.ready) { + if (this.state.scroll.ready) { this.handleResize() } else { this.setStateScroll({ @@ -145,8 +148,10 @@ export default class Scroller extends Component { findChildOnView = () => { const { children } = this.state.scroll + // return child on view, or the last one (when resizing ends up outside of the target) + const onView = children.find((child) => child.onView) || children[children.length - 1] - return children.find((child) => child.onView) + return onView } findChildIndexOnView = () => { @@ -157,8 +162,17 @@ export default class Scroller extends Component { scrollToPosition = (position) => { this.controller.update({ - scroll: position, - onFrame: ({ scroll }) => (this.target.scrollTop = scroll), + scroll: -position, + config: config.default, + onFrame: ({ scroll }) => { + this.setState((prevState) => ({ + scroll: { + ...prevState.scroll, + position: Math.abs(scroll), + } + }), this.handleScroll()) + return this.target.style.transform = `translate3d(0, ${scroll}px, 0)` + }, }) } @@ -333,17 +347,18 @@ export default class Scroller extends Component { handleTouchMove = (e) => { const { autoScroll } = this.props + const { touches, originalPosition, moving } = this.state.scroll - if (autoScroll) { + if (!autoScroll) { e.preventDefault() } - const { touches, originalPosition } = this.state.scroll - let distanceFromTouchStart = e.changedTouches[0].clientY - touches[0].clientY let touchPosition = originalPosition - distanceFromTouchStart - // this.scrollToPosition(touchPosition) + if (!autoScroll) { + this.scrollToPosition(touchPosition) + } } handleTouchEnd = (e) => { @@ -355,8 +370,12 @@ export default class Scroller extends Component { const movingUpwards = e.changedTouches[0].clientY < touches[0].clientY const movingDownwards = e.changedTouches[0].clientY > touches[0].clientY - if (movingDownwards) this.scrollToPrev() - if (movingUpwards) this.scrollToNext() + if (movingDownwards) { + this.scrollToPrevDebounced() + } + if (movingUpwards) { + this.scrollToNextDebounced() + } } else { this.scrollToActive() } @@ -382,6 +401,7 @@ export default class Scroller extends Component { scroll={scroll} /> Date: Fri, 28 Dec 2018 12:36:51 +0100 Subject: [PATCH 05/15] change license et al --- CHANGELOG.md | 3 +++ LICENSE | 2 +- README.md | 21 +++++++-------------- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3c70dd..b1115d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,7 @@ ## CHANGELOG +### 0.7.3 +Changed to css transforms for scrolling, instead of scrollTop + ### 0.1.0 First commit diff --git a/LICENSE b/LICENSE index e63360c..c4737e9 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2016 Duarte Monteiro +Copyright (c) 2018 Artur Miglio Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index e23f565..b0e06ea 100644 --- a/README.md +++ b/README.md @@ -3,23 +3,16 @@ This is a fork of [react-skroll](https://github.com/du5rte/react-skroll/). # react-skroll Uses `react-spring` for butter smooth enhanced scrolling experience -[![Build Status](https://travis-ci.org/du5rte/react-skroll.svg?branch=master)](https://travis-ci.org/du5rte/react-skroll) -[![David](https://img.shields.io/david/peer/du5rte/react-skroll.svg)](https://github.com/du5rte/react-skroll) +[![Build Status](https://travis-ci.org/arturmiglio/react-skroll.svg?branch=master)](https://travis-ci.org/arturmiglio/react-skroll) +[![David](https://img.shields.io/david/peer/du5rte/react-skroll.svg)](https://github.com/arturmiglio/react-skroll) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-blue.svg)](CONTRIBUTING.md#pull-requests) [![PRs Welcome](https://img.shields.io/badge/stability-experimental-red.svg)](CONTRIBUTING.md#pull-requests) ## Install ``` -npm install react-skroll --save +npm install @arturmiglio/react-skroll --save ``` -## UMD -``` - - -``` -(Module exposed as `ReactSkroll`) - ## Demo [Codepen Demo](http://codepen.io/du5rte/pen/KrGjEm) @@ -194,10 +187,10 @@ Types: ## More on props Check out source code: -- [Scroller.js](https://github.com/du5rte/react-skroll/blob/master/src/Scroller.js) -- [contextProviderShape.js](https://github.com/du5rte/react-skroll/blob/master/src/contextProviderShape.js) -- [nodeToScrollState.js](https://github.com/du5rte/react-skroll/blob/master/src/nodeToScrollState.js#L18) -- [nodeChildrenToScrollState.js](https://github.com/du5rte/react-skroll/blob/master/src/nodeChildrenToScrollState.js#L37) +- [Scroller.js](https://github.com/arturmiglio/react-skroll/blob/master/src/Scroller.js) +- [contextProviderShape.js](https://github.com/arturmiglio/react-skroll/blob/master/src/contextProviderShape.js) +- [nodeToScrollState.js](https://github.com/arturmiglio/react-skroll/blob/master/src/nodeToScrollState.js#L18) +- [nodeChildrenToScrollState.js](https://github.com/arturmiglio/react-skroll/blob/master/src/nodeChildrenToScrollState.js#L37) ## TODO - [ ] Document From 31fac9ada04277a5bb72568ca6fae18132cd4b71 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 28 Dec 2018 17:58:29 +0100 Subject: [PATCH 06/15] fixes for not autoScroll/autoFrame --- src/Scroller.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/Scroller.js b/src/Scroller.js index fc2d0c0..a740bcf 100644 --- a/src/Scroller.js +++ b/src/Scroller.js @@ -29,6 +29,8 @@ export default class Scroller extends Component { scroll: scrollInitalState } + this.targetY = 0 + // debounce is used to mimiques start, move and end events that don't have this functions this.handleScrollStart = debounce(500, true, this.handleScrollStart) this.handleResizeMove = throttle(50, this.handleResizeMove) @@ -230,6 +232,7 @@ export default class Scroller extends Component { let newPosition = this.findChildOnView().start this.scrollToPosition(newPosition) + this.targetY = newPosition } handleScroll = () => { @@ -275,10 +278,6 @@ export default class Scroller extends Component { handleWheel = (e) => { const { autoScroll } = this.props - if (autoScroll) { - e.preventDefault() - } - this.handleWheelStart(e) this.handleWheelMove(e) this.handleWheelEnd(e) @@ -303,7 +302,9 @@ export default class Scroller extends Component { } handleWheelMove = (e) => { - const { autoScroll } = this.props + const { autoScroll, autoFrame } = this.props + const { scroll } = this.state + const { viewHeight, scrollHeight, resting } = scroll if (autoScroll) { const prev = this.state.deltaY @@ -315,6 +316,10 @@ export default class Scroller extends Component { const movingUpwards = next > 0 const movingDownwards = next < 0 + if (!resting) { + return + } + if (movingDownwards) { this.scrollToPrevDebounced() } @@ -322,20 +327,27 @@ export default class Scroller extends Component { this.scrollToNextDebounced() } } + } else { + this.targetY += e.deltaY + this.targetY = Math.max(0, Math.min(this.targetY, scrollHeight - viewHeight)) + + this.scrollToPosition(this.targetY) } this.setState({ deltaY: e.deltaY }) } handleWheelEnd = (e) => { - const { autoFrame } = this.state.scroll + const { autoFrame } = this.props this.setStateScrollEnd({ wheeling: false, deltaY: null }) - if (autoFrame) this.scrollToActive() + if (autoFrame) { + this.scrollToActive() + } } handleTouchStart = (e) => { @@ -349,10 +361,6 @@ export default class Scroller extends Component { const { autoScroll } = this.props const { touches, originalPosition, moving } = this.state.scroll - if (!autoScroll) { - e.preventDefault() - } - let distanceFromTouchStart = e.changedTouches[0].clientY - touches[0].clientY let touchPosition = originalPosition - distanceFromTouchStart @@ -366,7 +374,7 @@ export default class Scroller extends Component { const timeLapse = Date.now() - timeStamp - if (timeLapse < 400) { + if (timeLapse < 500) { const movingUpwards = e.changedTouches[0].clientY < touches[0].clientY const movingDownwards = e.changedTouches[0].clientY > touches[0].clientY From f891aba828cae09ee8fa123170e5cbe9a39db397 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 28 Dec 2018 18:01:30 +0100 Subject: [PATCH 07/15] 0.7.4 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8e0d3bd..8c61a3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@arturmiglio/react-skroll", - "version": "0.7.3", + "version": "0.7.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f594ed5..dbcdb81 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@arturmiglio/react-skroll", "description": "Reactive Scrolling", - "version": "0.7.3", + "version": "0.7.4", "main": "lib/index.js", "scripts": { "clean": "rm -rf dist lib && mkdir dist lib", From 8d43a8c91d51b6698e0544d064c8ef2fd0bfb214 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 28 Dec 2018 19:46:24 +0100 Subject: [PATCH 08/15] adjust throttling --- src/Scroller.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/Scroller.js b/src/Scroller.js index a740bcf..5f5c079 100644 --- a/src/Scroller.js +++ b/src/Scroller.js @@ -34,14 +34,14 @@ export default class Scroller extends Component { // debounce is used to mimiques start, move and end events that don't have this functions this.handleScrollStart = debounce(500, true, this.handleScrollStart) this.handleResizeMove = throttle(50, this.handleResizeMove) - this.handleScrollEnd = debounce(500, this.handleScrollEnd) + this.handleScrollEnd = debounce(50, this.handleScrollEnd) this.handleWheelStart = debounce(100, true, this.handleWheelStart) this.handleWheelEnd = debounce(100, this.handleWheelEnd) this.handleResizeStart = debounce(250, true, this.handleResizeStart) this.handleResizeEnd = debounce(250, this.handleResizeEnd) - this.scrollToPrevDebounced = debounce(250, true, this.scrollToPrev) - this.scrollToNextDebounced = debounce(250, true, this.scrollToNext) + this.scrollToPrevThrottled = throttle(700, true, this.scrollToPrev) + this.scrollToNextThrottled = throttle(700, true, this.scrollToNext) this.controller = new Controller({ scroll: 0 }) } @@ -296,15 +296,15 @@ export default class Scroller extends Component { const movingUpwards = e.deltaY > 0 const movingDownwards = e.deltaY < 0 - if (movingDownwards) this.scrollToPrevDebounced() - if (movingUpwards) this.scrollToNextDebounced() + if (movingDownwards) this.scrollToPrevThrottled() + if (movingUpwards) this.scrollToNextThrottled() } } handleWheelMove = (e) => { const { autoScroll, autoFrame } = this.props const { scroll } = this.state - const { viewHeight, scrollHeight, resting } = scroll + const { viewHeight, scrollHeight } = scroll if (autoScroll) { const prev = this.state.deltaY @@ -316,15 +316,11 @@ export default class Scroller extends Component { const movingUpwards = next > 0 const movingDownwards = next < 0 - if (!resting) { - return - } - if (movingDownwards) { - this.scrollToPrevDebounced() + this.scrollToPrevThrottled() } if (movingUpwards) { - this.scrollToNextDebounced() + this.scrollToNextThrottled() } } } else { @@ -379,10 +375,10 @@ export default class Scroller extends Component { const movingDownwards = e.changedTouches[0].clientY > touches[0].clientY if (movingDownwards) { - this.scrollToPrevDebounced() + this.scrollToPrevThrottled() } if (movingUpwards) { - this.scrollToNextDebounced() + this.scrollToNextThrottled() } } else { this.scrollToActive() From 2940b75183dba223e97da9be3c21f8f03ef512cb Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 28 Dec 2018 19:46:55 +0100 Subject: [PATCH 09/15] 0.7.5 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8c61a3a..ed15e95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@arturmiglio/react-skroll", - "version": "0.7.4", + "version": "0.7.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index dbcdb81..9ff5990 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@arturmiglio/react-skroll", "description": "Reactive Scrolling", - "version": "0.7.4", + "version": "0.7.5", "main": "lib/index.js", "scripts": { "clean": "rm -rf dist lib && mkdir dist lib", From d71720b8091a59d62e2d0d1862d6de8270fd9c0f Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 30 Aug 2019 22:14:41 +0200 Subject: [PATCH 10/15] rollback license --- LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index c4737e9..e63360c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Artur Miglio +Copyright (c) 2016 Duarte Monteiro Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal From 1dab22b6d81c7e36214320dd024e1278a494aca5 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 30 Aug 2019 22:16:03 +0200 Subject: [PATCH 11/15] remove fork info --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index b0e06ea..4223114 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -This is a fork of [react-skroll](https://github.com/du5rte/react-skroll/). - # react-skroll Uses `react-spring` for butter smooth enhanced scrolling experience From 53a163b21e50716579008d3d2ad70f8119ecc24e Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 30 Aug 2019 22:16:48 +0200 Subject: [PATCH 12/15] rollback travis ci user --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4223114..c131d00 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # react-skroll Uses `react-spring` for butter smooth enhanced scrolling experience -[![Build Status](https://travis-ci.org/arturmiglio/react-skroll.svg?branch=master)](https://travis-ci.org/arturmiglio/react-skroll) +[![Build Status](https://travis-ci.org/du5rte/react-skroll.svg?branch=master)](https://travis-ci.org/arturmiglio/react-skroll) [![David](https://img.shields.io/david/peer/du5rte/react-skroll.svg)](https://github.com/arturmiglio/react-skroll) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-blue.svg)](CONTRIBUTING.md#pull-requests) [![PRs Welcome](https://img.shields.io/badge/stability-experimental-red.svg)](CONTRIBUTING.md#pull-requests) From 88e734432c4777f49997790607d21bb3a1647e04 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 30 Aug 2019 22:18:15 +0200 Subject: [PATCH 13/15] rollback github user --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c131d00..1503477 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # react-skroll Uses `react-spring` for butter smooth enhanced scrolling experience -[![Build Status](https://travis-ci.org/du5rte/react-skroll.svg?branch=master)](https://travis-ci.org/arturmiglio/react-skroll) -[![David](https://img.shields.io/david/peer/du5rte/react-skroll.svg)](https://github.com/arturmiglio/react-skroll) +[![Build Status](https://travis-ci.org/du5rte/react-skroll.svg?branch=master)](https://travis-ci.org/du5rte/react-skroll) +[![David](https://img.shields.io/david/peer/du5rte/react-skroll.svg)](https://github.com/du5rte/react-skroll) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-blue.svg)](CONTRIBUTING.md#pull-requests) [![PRs Welcome](https://img.shields.io/badge/stability-experimental-red.svg)](CONTRIBUTING.md#pull-requests) From 71ce185f7ea63361470a715432efeaa1c237af56 Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 30 Aug 2019 22:18:48 +0200 Subject: [PATCH 14/15] rollback package name --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1503477..3945477 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Uses `react-spring` for butter smooth enhanced scrolling experience ## Install ``` -npm install @arturmiglio/react-skroll --save +npm install react-skroll --save ``` ## Demo From f1b32b7500a7f008e300431feb44a634062586ec Mon Sep 17 00:00:00 2001 From: Artur Miglio Date: Fri, 30 Aug 2019 22:21:59 +0200 Subject: [PATCH 15/15] rollback github user --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3945477..de247af 100644 --- a/README.md +++ b/README.md @@ -185,10 +185,10 @@ Types: ## More on props Check out source code: -- [Scroller.js](https://github.com/arturmiglio/react-skroll/blob/master/src/Scroller.js) -- [contextProviderShape.js](https://github.com/arturmiglio/react-skroll/blob/master/src/contextProviderShape.js) -- [nodeToScrollState.js](https://github.com/arturmiglio/react-skroll/blob/master/src/nodeToScrollState.js#L18) -- [nodeChildrenToScrollState.js](https://github.com/arturmiglio/react-skroll/blob/master/src/nodeChildrenToScrollState.js#L37) +- [Scroller.js](https://github.com/du5rte/react-skroll/blob/master/src/Scroller.js) +- [contextProviderShape.js](https://github.com/du5rte/react-skroll/blob/master/src/contextProviderShape.js) +- [nodeToScrollState.js](https://github.com/du5rte/react-skroll/blob/master/src/nodeToScrollState.js#L18) +- [nodeChildrenToScrollState.js](https://github.com/du5rte/react-skroll/blob/master/src/nodeChildrenToScrollState.js#L37) ## TODO - [ ] Document