diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 23a9ccea5..836f40c40 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -678,6 +678,8 @@ class VirtualizedList extends React.PureComponent { state: State; + invertedWheelEventHandler: ?(ev: any) => void; + constructor(props: Props) { super(props); invariant( @@ -731,6 +733,19 @@ class VirtualizedList extends React.PureComponent { } } + // For issue https://github.com/necolas/react-native-web/issues/995 + this.invertedWheelEventHandler = (ev: any) => { + if (this.props.inverted && this._scrollRef && this._scrollRef.getScrollableNode) { + const node = (this._scrollRef: any).getScrollableNode(); + if (this.props.horizontal) { + node.scrollLeft -= ev.deltaX || ev.wheelDeltaX + } else { + node.scrollTop -= ev.deltaY || ev.wheelDeltaY + } + ev.preventDefault(); + } + }; + this.state = initialState; } @@ -747,6 +762,7 @@ class VirtualizedList extends React.PureComponent { parentDebugInfo: this.context.debugInfo, }); } + this.setupWebWheelHandler(); } componentWillUnmount() { @@ -766,6 +782,26 @@ class VirtualizedList extends React.PureComponent { tuple.viewabilityHelper.dispose(); }); this._fillRateHelper.deactivateAndFlush(); + this.teardownWebWheelHandler(); + } + + setupWebWheelHandler() { + if (this._scrollRef && this._scrollRef.getScrollableNode) { + this._scrollRef.getScrollableNode().addEventListener('wheel', + this.invertedWheelEventHandler + ); + } else { + setTimeout(() => this.setupWebWheelHandler(), 50); + return + } + } + + teardownWebWheelHandler() { + if (this._scrollRef && this._scrollRef.getScrollableNode) { + this._scrollRef.getScrollableNode().removeEventListener('wheel', + this.invertedWheelEventHandler + ); + } } static getDerivedStateFromProps(newProps: Props, prevState: State): State { @@ -2092,4 +2128,4 @@ const styles = StyleSheet.create({ }, }); -export default VirtualizedList; \ No newline at end of file +export default VirtualizedList;