diff --git a/README.md b/README.md index d890b5a..45c481e 100644 --- a/README.md +++ b/README.md @@ -152,6 +152,7 @@ Apply the withScrolling function to any html-identifier ("div", "ul" etc) or rea * `verticalStrength` - a function that returns the strength of the vertical scroll direction * `strengthMultiplier` - strength multiplier, play around with this (default 30) * `onScrollChange` - a function that is called when `scrollLeft` or `scrollTop` of the component are changed. Called with those two arguments in that order. + * `scrollContainer` - a custom Element to attach event listeners to for scrolling. Defaults to the wrapped react component. The strength functions are both called with two arguments. An object representing the rectangle occupied by the Scrollzone, and an object representing the coordinates of mouse. diff --git a/src/index.js b/src/index.js index dcffbd3..4c5e56c 100644 --- a/src/index.js +++ b/src/index.js @@ -60,6 +60,7 @@ export default function createScrollingComponent(WrappedComponent) { verticalStrength: PropTypes.func, horizontalStrength: PropTypes.func, strengthMultiplier: PropTypes.number, + scrollContainer: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object), }; static defaultProps = { @@ -85,7 +86,7 @@ export default function createScrollingComponent(WrappedComponent) { } componentDidMount() { - this.container = findDOMNode(this.wrappedInstance); + this.container = this.props.scrollContainer || findDOMNode(this.wrappedInstance); this.container.addEventListener('dragover', this.handleEvent); // touchmove events don't seem to work across siblings, so we unfortunately // have to attach the listeners to the body