diff --git a/README.md b/README.md index d694ee9..7b52eee 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ To prevent Chrome overscroll set `overscroll-behavior-y: contain [or] none;` on | resetEase | String | `cubic-bezier(0.215, 0.61, 0.355, 1)` | Ease when resetting | | shouldPullToRefresh | Function | `() => window.scrollY <= 0` | When to allow pulling | | disabled | Boolean | | Disables all functionality | +| targetComponent | Boolean | `false` | Enable to only handle touch events on the wrapped component, otherwise all window touch events will be handled | ## Examples diff --git a/src/index.js b/src/index.js index b1c89e5..fb55385 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,8 @@ class Pullable extends React.Component { this.clearTouchStatus(); + this.componentId = `pull-div-${Date.now() + Math.floor(Math.random() * 10000)}`; + this.state = { status: 'ready', height: 0 @@ -15,15 +17,17 @@ class Pullable extends React.Component { } componentDidMount() { - window.addEventListener('touchstart', this.onTouchStart); - window.addEventListener('touchmove', this.onTouchMove, { passive: false }); - window.addEventListener('touchend', this.onTouchEnd); + let element = this.props.targetComponent ? document.getElementById(this.componentId) : window; + element.addEventListener('touchstart', this.onTouchStart); + element.addEventListener('touchmove', this.onTouchMove, { passive: false }); + element.addEventListener('touchend', this.onTouchEnd); } componentWillUnmount() { - window.removeEventListener('touchstart', this.onTouchStart); - window.removeEventListener('touchmove', this.onTouchMove, { passive: false }); - window.removeEventListener('touchend', this.onTouchEnd); + let element = this.props.targetComponent ? document.getElementById(this.componentId) : window; + element.removeEventListener('touchstart', this.onTouchStart); + element.removeEventListener('touchmove', this.onTouchMove, { passive: false }); + element.removeEventListener('touchend', this.onTouchEnd); clearTimeout(this.refreshCompletedTimeout); clearTimeout(this.resetTimeout); @@ -142,7 +146,9 @@ class Pullable extends React.Component { - {this.props.children} +
+ {this.props.children} +
); }