diff --git a/README.md b/README.md index b33eb11..22dae15 100644 --- a/README.md +++ b/README.md @@ -92,3 +92,4 @@ You can define a custom `parentNode` element to base the scroll calulations on. | `threshold` | `Number` | `250` | The distance in pixels before the end of the items that will trigger a call to `loadMore`.| | `useCapture` | `Boolean` | `false` | Proxy to the `useCapture` option of the added event listeners.| | `useWindow` | `Boolean` | `true` | Add scroll listeners to the window, or else, the component's `parentNode`.| +| `momentumScrollQuirks` | `Boolean` | `false` | fixes problem which prevents resetting the scroll position after `loadMore` with `isReverse=true` when scrollContainer has `-webkit-overflow-scrolling = auto` ,see [this issue](https://github.com/CassetteRocks/react-infinite-scroller/issues/92)| diff --git a/dist/InfiniteScroll.js b/dist/InfiniteScroll.js index 5bb22a3..7805471 100644 --- a/dist/InfiniteScroll.js +++ b/dist/InfiniteScroll.js @@ -115,10 +115,16 @@ var InfiniteScroll = (function(_Component) { value: function componentDidUpdate() { if (this.props.isReverse && this.loadMore) { var parentElement = this.getParentElement(this.scrollComponent); + if (this.props.momentumScrollQuirks) { + parentElement.style['-webkit-overflow-scrolling'] = 'auto'; + } parentElement.scrollTop = parentElement.scrollHeight - this.beforeScrollHeight + this.beforeScrollTop; + if (this.props.momentumScrollQuirks) { + parentElement.style['-webkit-overflow-scrolling'] = 'touch'; + } this.loadMore = false; } this.attachScrollListener(); @@ -358,6 +364,7 @@ var InfiniteScroll = (function(_Component) { useCapture = renderProps.useCapture, useWindow = renderProps.useWindow, getScrollParent = renderProps.getScrollParent, + momentumScrollQuirks = renderProps.momentumScrollQuirks, props = _objectWithoutProperties(renderProps, [ 'children', 'element', @@ -371,7 +378,8 @@ var InfiniteScroll = (function(_Component) { 'threshold', 'useCapture', 'useWindow', - 'getScrollParent' + 'getScrollParent', + 'momentumScrollQuirks' ]); props.ref = function(node) { @@ -414,7 +422,8 @@ InfiniteScroll.propTypes = { getScrollParent: _propTypes2.default.func, threshold: _propTypes2.default.number, useCapture: _propTypes2.default.bool, - useWindow: _propTypes2.default.bool + useWindow: _propTypes2.default.bool, + momentumScrollQuirks: _propTypes2.default.bool }; InfiniteScroll.defaultProps = { element: 'div', @@ -427,7 +436,8 @@ InfiniteScroll.defaultProps = { isReverse: false, useCapture: false, loader: null, - getScrollParent: null + getScrollParent: null, + momentumScrollQuirks: false }; exports.default = InfiniteScroll; module.exports = exports['default']; diff --git a/src/InfiniteScroll.js b/src/InfiniteScroll.js index b08637e..232a205 100644 --- a/src/InfiniteScroll.js +++ b/src/InfiniteScroll.js @@ -15,7 +15,8 @@ export default class InfiniteScroll extends Component { getScrollParent: PropTypes.func, threshold: PropTypes.number, useCapture: PropTypes.bool, - useWindow: PropTypes.bool + useWindow: PropTypes.bool, + momentumScrollQuirks: PropTypes.bool }; static defaultProps = { @@ -29,7 +30,8 @@ export default class InfiniteScroll extends Component { isReverse: false, useCapture: false, loader: null, - getScrollParent: null + getScrollParent: null, + momentumScrollQuirks: false }; constructor(props) { @@ -49,10 +51,16 @@ export default class InfiniteScroll extends Component { componentDidUpdate() { if (this.props.isReverse && this.loadMore) { const parentElement = this.getParentElement(this.scrollComponent); + if (this.props.momentumScrollQuirks) { + parentElement.style['-webkit-overflow-scrolling'] = 'auto'; + } parentElement.scrollTop = parentElement.scrollHeight - this.beforeScrollHeight + this.beforeScrollTop; + if (this.props.momentumScrollQuirks) { + parentElement.style['-webkit-overflow-scrolling'] = 'touch'; + } this.loadMore = false; } this.attachScrollListener(); @@ -257,6 +265,7 @@ export default class InfiniteScroll extends Component { useCapture, useWindow, getScrollParent, + momentumScrollQuirks, ...props } = renderProps;